Déterminer si un élément existe sur la page avec JavaScript

Un exemple précis, pour un site, un div était généré via l'interface d'administration pour certaines pages, donc pour les autres pages le contenu était décalé. Pour éviter de recaler en fonction des pages avec css, et un rendu plus cohérent, il m'a fallu trouver une solution pour afficher un div par défaut si celui-ci n'avait pas été créé dans l'administration.

Après m'être penché sur des fonctions php, DOMDocument, ou jQuery, j'ai trouvé une solution toute simple, nécessitant très peu de code, en JavaScript.

Dans mon exemple, il me fallait afficher une image sous le header.

Si cette image était bien "créée" dans l'administration du site, le code donnait :

<div id="imageHeader" class="image-header">
    <img src="/lien-vers-mon-image.jpg" alt="mon image" />
</div>

Si cette image n'était pas créée dans l'administraion, #imageHeader était tout simplement absent du code.

J'ai donc ajouté le code suivant à la suite de #imageHeader :

<div id="defaultImageHeader" class="image-header" style="display:none;">
    <img src="/lien-vers-mon-image-par-defaut.jpg" alt="mon image par défaut" />
</div>
<script>
    if(document.getElementById("imageHeader") !== null) {
    }
    else { 
        document.getElementById('defaultImageHeader').style.display = "block"; 
    }
</script>

Display none permet de ne pas afficher cet élément, pour vérifier au préalable s'il a déjà été créé. S'il n'a pas été créé, le script bascule de display none à display block, tout simplement.