Question Comment insérer un élément après un autre élément dans JavaScript sans utiliser de bibliothèque?


Il y a insertBefore() en JavaScript, mais comment puis-je insérer un élément après un autre élément sans utiliser jQuery ou une autre bibliothèque?


512
2018-01-25 12:39


origine


Réponses:


referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

referenceNode est le noeud que vous voulez mettre newNode après. Si referenceNode est le dernier enfant de son élément parent, c'est bien, car referenceNode.nextSibling sera null et insertBefore gère ce cas en ajoutant à la fin de la liste.

Alors:

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

Essayez-le ici.


904
2018-01-25 12:42



JavaScript simple serait le suivant:

Ajouter avant:

element.parentNode.insertBefore(newElement, element);

Ajouter après

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

Mais, lancer quelques prototypes là-bas pour faciliter l'utilisation

En construisant les prototypes suivants, vous pourrez appeler ces fonctions directement à partir d'éléments nouvellement créés.

  • newElement.appendBefore(element); 

  • newElement.appendAfter(element);

.appendBefore (element) Prototype

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

.appendAfter (element) Prototype

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

Et, pour voir tout en action, exécutez l'extrait de code suivant

/* 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'));
div {
  text-align: center;
}
#Neighborhood {
  color: brown;
}
#NewElement {
  color: green;
}
<div id="Neighborhood">
  <div id="Neighbor1">Neighbor 1</div>
  <div id="Neighbor2">Neighbor 2</div>
  <div id="Neighbor3">Neighbor 3</div>
</div>

Exécutez-le sur JSFiddle


43
2017-08-21 08:05



Une recherche rapide sur Google révèle ce script

// create function, it expects 2 values.
function insertAfter(newElement,targetElement) {
    // target is what you want it to go after. Look for this elements parent.
    var parent = targetElement.parentNode;

    // if the parents lastchild is the targetElement...
    if (parent.lastChild == targetElement) {
        // add the newElement after the target element.
        parent.appendChild(newElement);
    } else {
        // else the target has siblings, insert the new element between the target and it's next sibling.
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

30
2018-01-25 12:43



insertAdjacentHTML + outerHTML

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

Upsides:

  • DRYer: vous n'avez pas besoin de stocker le noeud avant dans une variable et de l'utiliser deux fois. Si vous renommez la variable, moins l'occurrence est à modifier.
  • golfs mieux que le insertBefore (break même si le nom de la variable de noeud existante est long de 3 caractères)

Les inconvénients:

  • support de navigateur inférieur depuis plus récent: https://caniuse.com/#feat=insert-adjacent
  • va perdre des propriétés de l'élément tels que des événements parce que outerHTML convertit l'élément en chaîne Nous en avons besoin parce que insertAdjacentHTML ajoute du contenu à partir de chaînes plutôt que d'éléments.

24
2018-05-11 05:56



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

où node1 et node2 sont des noeuds DOM.

.after() est une toute nouvelle méthode [1], donc le support du navigateur peut être un problème.


6
2017-10-27 07:55



Ou vous pouvez simplement faire:

referenceNode.parentNode.insertBefore( newNode, referenceNode )
referenceNode.parentNode.insertBefore( referenceNode, newNode )

4
2018-05-28 09:05



Étape 1. Préparer les éléments:

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

Étape 2. Ajouter après:

elementParent.insertBefore(newElement, element.nextSibling);

4
2017-12-03 20:14



La méthode insertBefore () est utilisée comme parentNode.insertBefore(). Donc, pour imiter cela et faire une méthode parentNode.insertAfter() nous pouvons écrire le code suivant.

JavaScript

Node.prototype.insertAfter = function(newNode, referenceNode) {
    return referenceNode.parentNode.insertBefore(
        newNode, referenceNode.nextSibling); // based on karim79's solution
};

// getting required handles
var refElem = document.getElementById("pTwo");
var parent = refElem.parentNode;

// creating <p>paragraph three</p>
var txt = document.createTextNode("paragraph three");
var paragraph = document.createElement("p");
paragraph.appendChild(txt);

// now we can call it the same way as insertBefore()
parent.insertAfter(paragraph, refElem);

HTML

<div id="divOne">
    <p id="pOne">paragraph one</p>
    <p id="pTwo">paragraph two</p>
</div>

Notez que l'extension du DOM n'est peut-être pas la bonne solution pour vous, comme indiqué dans Cet article.

Hovewer, cet article a été écrit en 2010 et les choses pourraient être différentes maintenant. Alors décidez vous-même.

Méthode JavaScript DOM insertAfter () @ jsfiddle.net


2
2018-04-07 10:06