web-dev-qa-db-fra.com

Comment définir un élément DOM comme premier enfant?

J'ai l'élément E et j'y ajoute quelques éléments. Tout à coup, je découvre que le prochain élément devrait être le premier enfant de E. Quel est le truc, comment le faire? La méthode unshift ne fonctionne pas car E est un objet, pas un tableau. 

Le chemin le plus long serait de parcourir les enfants de E et de déplacer les clés ++, mais je suis sûr qu’il existe un moyen plus agréable. 

javascriptjqueryarraysdomelements
156
Popara
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E

eElement.insertBefore(newFirstElement, eElement.firstChild);
357
nemisj

Version 2017

Vous pouvez utiliser 

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

De MDN :

La méthode insertAdjacentElement () insère un nœud d'élément donné à une position donnée par rapport à l'élément sur lequel il est appelé.

position
DOMString représentant la position par rapport à l'élément; doit être l’une des chaînes suivantes:
beforebegin: Avant l'élément lui-même.
afterbegin: Juste à l'intérieur de l'élément, avant son premier enfant.
beforeend: Juste à l'intérieur de l'élément, après son dernier enfant.
afterend: Après l'élément lui-même. 

élément
L'élément à insérer dans l'arbre.

Dans la famille de insertAdjacent également, il existe les méthodes suivantes: 

element.insertAdjacentHTML('afterbegin','htmlText') pour injecter une chaîne html directement, comme innerHTML mais sans tout surcharger, de sorte que vous puissiez sauter le processus oppressant de document.createElement et même construire un composant entier avec un processus de manipulation de chaîne

element.insertAdjacentText pour injecter une chaîne de désinfection dans un élément. pas plus encode/decode

59
pery mimon

Version 2018

parentElement.prepend(newFirstChild);

C'est moderne JS! Il est plus lisible que les options précédentes. Il est actuellement disponible dans Chrome, FF et Opera.

P.S. Vous pouvez directement ajouter des chaînes 

parentElement.prepend('This text!');

developer.mozilla.org

Puis-je utiliser - 86% Oct 2018

Polyfill

29
Gibolt

Vous pouvez le mettre en œuvre directement dans tous vos éléments HTML de fenêtre.
Comme ça :

HTMLElement.prototype.appendFirst=function(childNode){
    if(this.firstChild)this.insertBefore(childNode,this.firstChild);
    else this.appendChild(childNode);
};
8
yorg

Réponse acceptée refactorisée dans une fonction:

function prependChild(parentEle, newFirstChildEle) {
    parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
5
Joseph Dykstra

Sauf si j'ai mal compris:

$("e").prepend("<yourelem>Text</yourelem>");

Ou

$("<yourelem>Text</yourelem>").prependTo("e");

Bien que cela semble correspondre à votre description, il existe une condition

if (SomeCondition){
    $("e").prepend("<yourelem>Text</yourelem>");
}
else{
    $("e").append("<yourelem>Text</yourelem>");
}
2
James Wiseman

Je pense que vous recherchez la fonction .prepend dans jQuery. Exemple de code:

$("#E").prepend("<p>Code goes here, yo!</p>");
1
Emil Vikström
var newItem = document.createElement("LI");       // Create a <li> node
var textnode = document.createTextNode("Water");  // Create a text node
newItem.appendChild(textnode);                    // Append the text to <li>

var list = document.getElementById("myList");    // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]);  // Insert <li> before the first child of <ul>

https://www.w3schools.com/jsref/met_node_insertbefore.asp

0
Ilker Cat

J'ai créé ce prototype pour ajouter des éléments à un élément parent.

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};
0
Raza