web-dev-qa-db-fra.com

Insérer un nœud frère dans JS

J'ai donc un div avec quelques tags pré, comme ceci:

<div id="editor" >
    <pre contentEditable="true">1</pre>
    <pre contentEditable="true">2</pre>
    <pre contentEditable="true">3</pre>
</div>

Maintenant, je veux utiliser Javascript pour mettre un nouveau noeud pre entre 1 et 2. J'ai essayé de le faire de cette façon (car je comprends que le DOM est un arbre doublement lié), mais je reçois le sentiment que peut-être les pointeurs ne sont pas modifiables à mesure que je m'en approche.

(juste un extrait dans un gestionnaire d'événements, e étant l'événement)

var tag = e.srcElement;
    if(tag.nextSibling){
        var next = tag.nextSibling;
        var newPre = document.createElement('pre');
        newPre.setAttribute("contentEditable", "true");
        newPre.innerHTML = "boom";
        tag.nextSibling = newPre;
        newPre.nextSibling = next;
    }

Ces deux dernières lignes sont issues de mon expérience en C++, mais je me sens mal dans JS. Comment définir un nouveau nœud frère?

javascripthtmldomsiblings
24
Chris

Voici comment je ferais cela:

[~ # ~] js [~ # ~] 

var container = document.getElementById('editor'),
    firstChild = container.childNodes[1];
if (container && firstChild) {
    var newPre = document.createElement('pre');
    newPre.setAttribute("contentEditable", "true");
    newPre.innerHTML = "boom";  
    firstChild.parentNode.insertBefore(newPre, firstChild.nextSibling);    
}

jsfiddle: http://jsfiddle.net/bZGEZ/

48
Minko Gechev

Vous pouvez également insérer un nouveau frère en utilisant insertAdjacentElement ou insertAdjacentHTML ; les deux prennent les options beforebegin, beforeend, afterbegin et afterend.

Exemple:

var container = document.getElementById('editor'),
firstChild = container.childNodes[1];

var newPre = document.createElement('pre');
newPre.setAttribute("contentEditable", "true");
newPre.innerHTML = "boom";  
firstChild.insertAdjacentElement("afterend", newPre);
24
Kevin Farrugia