Javascript ajoute enfant après élément [dupliquer]
cette question a déjà une réponse ici:
- Comment insérer un élément après un autre élément en JavaScript sans utiliser une bibliothèque? 17 réponses
j'aimerais ajouter un élément li après un autre li à l'intérieur d'un élément ul en utilisant javascript, C'est le code que j'ai donc loin..
var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";
je suis familier avec appendChild,
parentGuest.appendChild(childGuest);
cependant ceci ajoute le nouvel élément à l'intérieur de l'autre, et pas après. Comment puis-je ajouter le nouvel élément après l'existant? Grâce.
<ul>
<li id="one"><!-- where the new li is being put --></li>
<!-- where I want the new li -->
</ul>
6 réponses
vous pouvez utiliser:
if (parentGuest.nextSibling) {
parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
}
else {
parentGuest.parentNode.appendChild(childGuest);
}
mais comme Pavel l'a souligné, le referencelement peut être nul/non défini, et si oui, avant se comporte comme appendChild . Ainsi, ce qui suit est équivalent à ce qui précède:
parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
vous devez ajouter le nouvel élément au parent de l'élément existant avant le prochain frère de l'élément. Comme:
var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";
parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
ou si vous voulez juste l'Ajouter, puis:
var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";
parentGuest.parentNode.appendChild(childGuest);
si vous recherchez une solution js simple, vous n'avez qu'à utiliser insertBefore() contre nextSibling .
quelque chose comme:
parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
notez que la valeur par défaut de nextSibling est null , donc vous n'avez pas besoin de faire quoi que ce soit de spécial pour cela.
mise à Jour: Vous n'avez même pas besoin de la if vérifier la présence de parentGuest.nextSibling comme actuellement accepté de répondre à n', parce que s'il n'y a pas de prochain frère, il retournera null , et passer null au deuxième argument de insertBefore() signifie: ajouter à la fin.
référence:
.
si vous utilisez jQuery (ignorer autrement, j'ai déclaré simple réponse JS ci-dessus) , vous pouvez tirer parti de la pratique after() méthode:
$("#one").after("<li id='two'>");
référence:
cela suffit :
parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling || null);
puisque si le refnode (second paramètre) est nul, un appendice régulier est effectué. voir ici: http://reference.sitepoint.com/javascript/Node/insertBefore
en fait je doute que le || null est nécessaire, essayer et voir.
, Vous pouvez aussi le faire
function insertAfter(node1, node2) {
node1.outerHTML += node2.outerHTML;
}
ou
function insertAfter2(node1, node2) {
var wrap = document.createElement("div");
wrap.appendChild(node2.cloneNode(true));
var node2Html = wrap.innerHTML;
node1.insertAdjacentHTML('afterend', node2Html);
}
après est maintenant une méthode JavaScript
citant MDN
la méthode
ChildNode.after()insère un ensemble de noeuds ouDOMStringobjets dans la liste des enfants de ceChildNode's parent, juste après ceChildNode. Les objets DOMString sont insérés comme des noeuds de texte équivalents.
la prise en charge du navigateur est Chrome (54+), Firefox (49+) et Opera(39+). Ça ne supporte pas IE et Edge.
Extrait de
var elm=document.getElementById('div1');
var elm1 = document.createElement('p');
var elm2 = elm1.cloneNode();
elm.append(elm1,elm2);
//added 2 paragraphs
elm1.after("This is sample text");
//added a text content
elm1.after(document.createElement("span"));
//added an element
console.log(elm.innerHTML);<div id="div1"></div>dans l'extrait, j'ai utilisé un autre terme ajoute trop