Dans la section précédente, nous avons expliqué comment créer de nouveaux n?uds. Le nouveau n?ud créé doit être ajouté au DOM (document HTML) pour être utile.

Javascript propose deux méthodes pour ajouter des n?uds?:

insertBefore()

Méthode insertBefore() Une nouvelle Le n?ud peut être inséré devant le n?ud spécifié.

Syntaxe?:
parentNode.insertBefore(newNode, thisNode)
Description du paramètre/valeur de retour?:

Pour Par exemple, l'instruction pour ajouter un n?ud devant le n?ud avec id="dome" est?:

var ele_div=document.createElement("div");
var thisNode=document.getElementById("demo");
this.parentNode.insertBefore(ele_div , thisNode);

Remarque?: insertBefore() est une méthode du n?ud parent du n?ud actuel lors de l'ajout. un n?ud, vous devez non seulement conna?tre le n?ud actuel, mais également conna?tre le n?ud parent du n?ud actuel. Généralement, le n?ud parent peut être obtenu via thisNode.parentNode.

Par exemple, ajoutez de nouveaux n?uds devant le n?ud spécifié?:

<div id="demo">
    <div id="thisNode">點擊這里添加新節(jié)點</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
    var ele_div=document.createElement("div");
    var ele_text=document.createTextNode("這是新節(jié)點");
    ele_div.appendChild(ele_text);
    this.parentNode.insertBefore(ele_div , this);
}
</script>

appendChild()

appendChild() peut ajouter de nouveaux n?uds enfants au n?ud spécifié , et placez le n?ud ajouté à la fin.

Syntaxe?:
parentNode.appendChild(newNode)
Description du paramètre/valeur de retour?:

Par exemple, à L'instruction pour ajouter des n?uds enfants à un n?ud avec id="dome" est?:

var ele_div=document.createElement("div");
var ele_parent=document.getElementById("demo");
ele_parent.appendChild(ele_div);

Par exemple, pour ajouter continuellement de nouveaux n?uds au n?ud spécifié?:

<div id="demo">
    <div id="thisNode">點擊添加新節(jié)點</div>
</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
    var ele_div=document.createElement("div");
    var ele_text=document.createTextNode("這是新節(jié)點 ");
    ele_div.appendChild(ele_text);
    this.appendChild(ele_div);
}
</script>

Malheureusement, Javascript n'est pas fourni derrière le n?ud spécifié. Il n'existe aucune méthode pour insérer des n?uds, ni une méthode pour insérer des n?uds enfants devant le n?ud spécifié.

Cependant, nous pouvons utiliser les méthodes existantes pour y parvenir. Deux fonctions personnalisées sont données ci-dessous.

/**
  * func    insertAfert    在指定節(jié)點的后面插入節(jié)點
  * pram    newNode    要添加的新節(jié)點
  * pram    thisNode    當前節(jié)點（指定節(jié)點）
**/
function insertAfter(newNode, thisNode){
    var parent = thisNode.parentNode;
    if (parent.lastChild == thisNode) {
        // 如果父節(jié)點的最后一個節(jié)點是指定節(jié)點，則直接添加
        parent.appendChild(newNode);
    }else {
        parent.insertBefore(newNode , thisNode.nextSibling);
        //如果不是，則在指定節(jié)點的下一個節(jié)點前面插入
    }
}
/**
  * func    appendChildPre    在指定節(jié)點的前面插入子節(jié)點
  * pram    parent    父節(jié)點
  * pram    newNode    要添加的新節(jié)點
**/
function appendChildPre(parent , newNode){
    if(parent.length>=1){
        // 如果存在子節(jié)點，則在第一個子節(jié)點的前面添加
        parent.insertBefore(newNode , parent.firstNode);
    }else{
        // 如果不存在，則在最后添加
        parent.appendChild(newNode);
    }
}