Insérez frère nœud en JS

Donc, j'ai un div avec quelques balises en elle, comme suit:

<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 pre nœud entre 1 et 2. J'ai essayé de faire de cette façon (car je comprends le DOM est un doublement chaînée de l'arbre), mais je le sentiment que peut-être les pointeurs ne sont pas modifiables comme je suis de s'en approcher.

(juste un extrait de code à l'intérieur d'un gestionnaire d'événement, e être le cas)

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 de mon c++ de l'expérience, mais se sentent dégueulasse en JS. Comment pourrais-je définir un nouveau frère ou sœur nœud?

InformationsquelleAutor Chris | 2012-01-07
  1. 46

    Ici est de savoir comment je le ferais:

    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/

    • Améliorations possibles: 1) l'utilisation des "enfants" (seulement les éléments) au lieu de "childNodes' (éléments et de nœuds de texte); 2) vérification du conteneur enfants dans les "si": récipient peut être null; 3) l'utilisation native HTMLElement 'contentEditable" la propriété plutôt que de setAttribute; 4) l'utilisation de 'textContent' au lieu de 'innerHTML' si vous n'avez pas besoin d'analyse de la valeur HTML (comme dans ce cas); 5) l'utilisation de plus simple DOM attacher les méthodes de "l'après" et "avant" (la plupart des navigateurs sauf IE11 les soutenir).
    InformationsquelleAutor Minko Gechev
  2. 24

    Vous pouvez également insérer un nouveau frère ou sœur à l'aide de insertAdjacentElement ou insertAdjacentHTML; à la fois de prendre 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);
    • J'ai été à la programmation pour les années, et c'est la première fois que j'ai entendu de insertAdjacentElement, et il est absolument magnifique! Merci!!!!
    InformationsquelleAutor Kevin Farrugia