javascript - tablas - ¿Cómo establecer el elemento DOM como primer hijo?

insertbefore javascript ejemplo

Question

Tengo el elemento E y le agrego algunos elementos. De repente, descubro que el siguiente elemento debería ser el primer hijo de E. ¿Cuál es el truco, cómo hacerlo? El desvío del método no funciona porque E es un objeto, no una matriz.

El camino largo sería iterar a través de los niños de E y move''em key ++, pero estoy seguro de que hay una manera más bonita.

Answer 1

Versión 2017

Puedes usar

targetElement.insertAdjacentElement(''afterbegin'', newFirstElement)

De MDN :

El método insertAdjacentElement () inserta un nodo de elemento dado en una posición dada relativa al elemento sobre el que se invoca.

posición
Un DOMString que representa la posición relativa al elemento; debe ser una de las siguientes cadenas:
beforebegin : antes del elemento en sí.
afterbegin : justo dentro del elemento, antes de su primer hijo.
beforeend : justo dentro del elemento, después de su último hijo.
afterend : después del elemento en sí.

elemento
El elemento que se insertará en el árbol.

También en la familia de insertAdjacent existen los métodos hermanos:

element.insertAdjacentHTML(''afterbegin'',''htmlText'') para inyectar cadena html directamente, como innerHTML pero sin overide todo, para que pueda saltar el proceso opresivo de document.createElement e incluso compilar todo el compilado con el proceso de manipulación de cadenas

element.insertAdjacentText para inyectar sanitize string en el elemento. no más encode/decode

Answer 2

A menos que haya entendido mal:

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

O

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

Aunque suena como por su descripción que hay alguna condición adjunta, entonces

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

Answer 3

Creé este prototipo para anteponer elementos al elemento padre.

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

Answer 4

Creo que estás buscando la función .prepend en jQuery. Código de ejemplo:

$("#E").prepend("<p>Code goes here, yo!</p>");

Answer 5

Puedes implementarlo directamente en todos tus elementos html de ventana.
Me gusta esto :

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

Answer 6

Respuesta aceptada refactorizada en una función:

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

Answer 7

parentElement.prepend(newFirstChild);

¡Esto es JS moderno! Es más legible que las opciones anteriores. Actualmente está disponible en Chrome, FF y Opera.

PD: puede anteponer cadenas directamente

parentElement.prepend(''This text!'');

developer.mozilla.org

Puedo usar - 84% Mar 2018

Polyfill

Answer 8

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

eElement.insertBefore(newFirstElement, eElement.firstChild);

Answer 9

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