Autres actions

Parent Previous Next



Autres actions



Vérifier la présence d'éléments enfants

Rien de plus facile pour vérifier la présence d'éléments enfants : hasChildNodes(). Il suffit d'utiliser cette méthode sur l'élément de votre choix ; si cet élément possède au moins un enfant, la méthode renverra true :

<div>

  <p id="myP">Un peu de texte <a>et un lien</a></p>

</div>

 

<script>

  var paragraph = document.getElementsByTagName('p')[0];

       

  alert(paragraph.hasChildNodes()); // Affiche true

</script>


Insérer à la bonne place : insertBefore()


La méthode insertBefore() permet d'insérer un élément avant un autre. Elle reçoit deux paramètres : le premier est l'élément à insérer, tandis que le deuxième est l'élément avant lequel l'élément va être inséré. Exemple :

<p id="myP">Un peu de texte <a>et un lien</a></p>

 

<script>

  var paragraph    = document.getElementsByTagName('p')[0];

  var emphasis     = document.createElement('em'),

      emphasisText = document.createTextNode(' en emphase légère ');

           

      emphasis.appendChild(emphasisText);

       

  paragraph.insertBefore(emphasis, paragraph.lastChild);

</script>



Comme pour appendChild(), cette méthode s'applique sur l'élément parent.


Une bonne astuce : insertAfter()

Le Javascript met à disposition insertBefore(), mais pas insertAfter(). C'est dommage car, bien que l'on puisse s'en passer, cela est parfois assez utile. Qu'à cela ne tienne, créons donc une telle fonction.

Malheureusement, il ne nous est pas possible, à ce stade-ci du cours, de créer une méthode, qui s'appliquerait comme ceci :

element.insertAfter(newElement, afterElement)


Non, il va falloir nous contenter d'une « simple » fonction :

insertAfter(newElement, afterElement)


Algorithme

Pour insérer après un élément, on va d'abord récupérer l'élément parent. C'est logique, puisque l'insertion de l'élément va se faire soit via appendChild(), soit via insertBefore() : si on veut ajouter notre élément après le dernier enfant, c'est simple, il suffit d'appliquer appendChild(). Par contre, si l'élément après lequel on veut insérer notre élément n'est pas le dernier, on va utiliser insertBefore() en ciblant l'enfant suivant, avec nextSibling :

function insertAfter(newElement, afterElement) {

    var parent = afterElement.parentNode;

     

    if (parent.lastChild === afterElement) { // Si le dernier élément est le même que l'élément après lequel on veut insérer, il suffit de faire appendChild()

        parent.appendChild(newElement);

    } else { // Dans le cas contraire, on fait un insertBefore() sur l'élément suivant

        parent.insertBefore(newElement, afterElement.nextSibling);

    }

}


Créé avec HelpNDoc Personal Edition: Éditeur complet de livres électroniques ePub

Site à deux balles