Comment insérer un élément après l'autre élément en JavaScript sans l'aide d'une bibliothèque?

Simple JavaScript Serait le Suivant:

Avant D'Ajouter:

element.parentNode.insertBefore(newElement, element);

Ajouter Après:

element.parentNode.insertBefore(newElement, element.nextSibling);

---

Mais, Mélanger Quelques Prototypes Là Pour la Facilité d'Utilisation

Par la construction de prototypes suivants, vous serez en mesure d'appeler ces fonctions directement à partir nouvellement créé éléments.

• newElement.appendBefore(element);

• newElement.appendAfter(element);

.appendBefore(élément) Prototype

Element.prototype.appendBefore = function (element) {
  element.parentNode.insertBefore(this, element);
},false;

.appendAfter(élément) Prototype

Element.prototype.appendAfter = function (element) {
  element.parentNode.insertBefore(this, element.nextSibling);
},false;

---

Et Pour Voir le Tout En Action, Exécutez le Code Suivant Extrait de

JS:

/* Adds Element BEFORE NeighborElement */
Element.prototype.appendBefore = function(element) {
  element.parentNode.insertBefore(this, element);
}, false;

/* Adds Element AFTER NeighborElement */
Element.prototype.appendAfter = function(element) {
  element.parentNode.insertBefore(this, element.nextSibling);
}, false;


/* Typical Creation and Setup A New Orphaned Element Object */
var NewElement = document.createElement('div');
NewElement.innerHTML = 'New Element';
NewElement.id = 'NewElement';


/* Add NewElement BEFORE -OR- AFTER Using the Aforementioned Prototypes */
NewElement.appendAfter(document.getElementById('Neighbor2'));

CSS:

div {
  text-align: center;
}
#Neighborhood {
  color: brown;
}
#NewElement {
  color: green;
}

HTML:

<div id="Neighborhood">
  <div id="Neighbor1">Neighbor 1</div>
  <div id="Neighbor2">Neighbor 2</div>
  <div id="Neighbor3">Neighbor 3</div>
</div>

Exécuter sur JSFiddle

insertAdjacentHTML + outerHTML

elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)

Avantages:

• Sèche-linge: vous n'avez pas à stocker l'avant nœud dans une variable et de l'utiliser deux fois. Si vous renommez la variable, moins l'événement à modifier.
• golfs de mieux que la insertBefore (pause, même si le nœud existant nom de la variable est de 3 caractères)

Inconvénients:

• inférieur de la prise en charge du navigateur depuis plus récents: https://caniuse.com/#feat=insert-adjacent
• perdra les propriétés de l'élément, telles que des événements, car outerHTML convertit l'élément d'une chaîne de caractères. Nous en avons besoin car insertAdjacentHTML ajoute du contenu à partir de chaînes de caractères plutôt que des éléments.

node1.after(node2) produit <node1/><node2/>,

où node1 et node2 sont les nœuds DOM.

.after() n'est pas pris en charge sur les anciens navigateurs [1], de sorte que vous pourriez avoir besoin pour appliquer un polyfill.

L'étape 1. Préparer Les Éléments :

var element = document.getElementById('ElementToAppendAfter');
var newElement = document.createElement('div');
var elementParent = element.parentNode;

L'étape 2. Ajouter après :

elementParent.insertBefore(newElement, element.nextSibling);

Idéalement insertAfter devrait fonctionner similaire à insertBefore. Le code ci-dessous effectuera les tâches suivantes:

• Si il n'y a pas d'enfants, le nouveau Node est ajouté
• Si il n'y a pas de référence Node, la nouvelle Node est ajouté
• Si il n'y a pas de Node après la référence Node, la nouvelle Node est ajouté
• Si la référence Node a un frère ou une sœur d'après, puis le nouveau Node est inséré, avant que frère
• Renvoie la nouvelle Node

L'extension de Node

Node.prototype.insertAfter = function(node, referenceNode) {

    if (node)
        this.insertBefore(node, referenceNode && referenceNode.nextSibling);

    return node;
};

Un exemple courant

node.parentNode.insertAfter(newNode, node);

Voir le code s'exécutant

JS:

//First extend
Node.prototype.insertAfter = function(node, referenceNode) {
    
    if (node)
        this.insertBefore(node, referenceNode && referenceNode.nextSibling);

    return node;
};

var referenceNode,
    newNode;

newNode = document.createElement('li')
newNode.innerText = 'First new item';
newNode.style.color = '#FF0000';

document.getElementById('no-children').insertAfter(newNode);

newNode = document.createElement('li');
newNode.innerText = 'Second new item';
newNode.style.color = '#FF0000';

document.getElementById('no-reference-node').insertAfter(newNode);

referenceNode = document.getElementById('no-sibling-after');
newNode = document.createElement('li');
newNode.innerText = 'Third new item';
newNode.style.color = '#FF0000';

referenceNode.parentNode.insertAfter(newNode, referenceNode);

referenceNode = document.getElementById('sibling-after');
newNode = document.createElement('li');
newNode.innerText = 'Fourth new item';
newNode.style.color = '#FF0000';

referenceNode.parentNode.insertAfter(newNode, referenceNode);

HTML:

<h5>No children</h5>
<ul id="no-children"></ul>

<h5>No reference node</h5>
<ul id="no-reference-node">
  <li>First item</li>
</ul>

<h5>No sibling after</h5>
<ul>
  <li id="no-sibling-after">First item</li>
</ul>

<h5>Sibling after</h5>
<ul>
  <li id="sibling-after">First item</li>
  <li>Third item</li>
</ul>

 <!DOCTYPE html>
 <html lang="ca">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function createDiv(){
            var newDiv = document.createElement("div");
            var txt = document.createTextNode("I'm the second div");
            newDiv.appendChild(txt);
            var x = document.getElementsByTagName("BODY")[0];
            x.insertBefore(newDiv, third);
        }
    </script>
</head>
<body>
    <div class="first">
        <p>
            I'm the first div
        </p>
    </div>
    <div id="third">
        <p>
            I'm the third div
        </p>
    </div>
    <button type= " button " name= " button " onclick = " createDiv() " >
        Create the second Div
    </button>
</body>
</html>

une mise en œuvre robuste de insertAfter.

//source: https://github.com/jserz/domPlus/blob/master/src/insertAfter()/insertAfter.js
Node.prototype.insertAfter = Node.prototype.insertAfter || function (newNode, referenceNode) {
  function isNode(node) {
    return node instanceof Node;
  }

  if(arguments.length < 2){
    throw(new TypeError("Failed to execute 'insertAfter' on 'Node': 2 arguments required, but only "+ arguments.length +" present."));
  }

  if(isNode(newNode)){
    if(referenceNode === null || referenceNode === undefined){
      return this.insertBefore(newNode, referenceNode);
    }

    if(isNode(referenceNode)){
      return this.insertBefore(newNode, referenceNode.nextSibling);
    }

    throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 2 is not of type 'Node'."));
  }

  throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 1 is not of type 'Node'."));

};

if( !Element.prototype.insertAfter ) {
    Element.prototype.insertAfter = function(item, reference) {
        if( reference.nextSibling )
            reference.parentNode.insertBefore(item, reference.nextSibling);
        else
            reference.parentNode.appendChild(item);
    };
}