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 método unshift no funciona porque E es un objeto, no una matriz.
Un largo camino sería iterar a través de los hijos de E y moverlos con la tecla ++, pero estoy seguro de que hay una forma más bonita.
Respuestas:
fuente
Versión 2017
Puedes usar
De MDN :
También en la familia de
insertAdjacent
hay los métodos de hermanos:element.insertAdjacentHTML('afterbegin','htmlText')
para inyectar cadenas html directamente, comoinnerHTML
pero sin anular todo, para que pueda saltar el proceso opresivodocument.createElement
e incluso construir componentes completos con el proceso de manipulación de cadenaselement.insertAdjacentText
para inyectar cadena de desinfección en el elemento. no másencode/decode
fuente
element
typeofdocument-fragment
que no tieneinsertAdjacent...()
. hasta que tengamos una mejor respuesta, su mejor conjetura es agregar elfragment
adiv
. haz tu manipulación dom y luego usaRange.selectNodeContents()
yRange.extractContents()
para recuperar un fragmentoVersión 2018
¡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
developer.mozilla.org
¿Puedo usar - 94% mayo 2020
Polyfill
fuente
.appendChild()
pero agregarlo al principio es en.prepend()
lugar de apegarse a la convención y llamarlo.prependChild()
append()
existe también, funciona de la misma manera queprepend()
, pero al finalprepend
mientras descubrí que ya era eso. :( Ok, no existía en el pasado.Puede implementarlo directamente en todos los elementos html de su ventana.
Me gusta esto :
fuente
prepend
es el vainilla JS equivalente, sin necesidad de un prototipo. Será estándar en ES7, y debe usarlo si es posible para su aplicaciónRespuesta aceptada refactorizada en una función:
fuente
eElement
tiene sentido. Y para eso, necesito leer la pregunta. La mayoría de las veces, solo verifico el título y voy directamente a la respuesta, ignorando los detalles de la pregunta.A menos que haya entendido mal:
O
Aunque por su descripción parece que hay alguna condición adjunta, entonces
fuente
Creo que estás buscando la función .prepend en jQuery. Código de ejemplo:
fuente
Creé este prototipo para anteponer elementos al elemento padre.
fuente
https://www.w3schools.com/jsref/met_node_insertbefore.asp
fuente