javascript - tablas - ¿Cómo establecer el elemento DOM como primer hijo?
insertbefore javascript ejemplo (9)
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.
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
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>");
}
Creé este prototipo para anteponer elementos al elemento padre.
Node.prototype.prependChild = function (child: Node) {
this.insertBefore(child, this.firstChild);
return this;
};
Creo que estás buscando la función .prepend en jQuery. Código de ejemplo:
$("#E").prepend("<p>Code goes here, yo!</p>");
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);
};
Respuesta aceptada refactorizada en una función:
function prependChild(parentEle, newFirstChildEle) {
parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
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!'');
Puedo usar - 84% Mar 2018
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E
eElement.insertBefore(newFirstElement, eElement.firstChild);
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>