Eu tenho o elemento E e estou anexando alguns elementos a ele. De repente, descubro que o próximo elemento deve ser o primeiro filho de E. Qual é o truque, como fazê-lo? Desvio de método não funciona porque E é um objeto, não uma matriz.
O caminho longo seria percorrer os filhos de E e movê-los com a chave ++, mas tenho certeza de que existe um caminho mais bonito.
Respostas:
fonte
2017 version
Você pode usar
Do MDN :
Também na família de
insertAdjacent
existem os métodos irmãos:element.insertAdjacentHTML('afterbegin','htmlText')
para injetar diretamente a string html, comoinnerHTML
mas sem substituir tudo, para que você possa pular o processo opressivodocument.createElement
e até criar o componente inteiro com o processo de manipulação da stringelement.insertAdjacentText
para injetar higienizar a string no elemento. não maisencode/decode
fonte
element
typeofdocument-fragment
que não teminsertAdjacent...()
. até que tenhamos uma resposta melhor, seu melhor palpite é anexar afragment
adiv
. fazer a sua manipulação dom e, em seguida, usarRange.selectNodeContents()
eRange.extractContents()
voltar um fragmentoVersão 2018
Este é o JS moderno! É mais legível que as opções anteriores. Atualmente, está disponível no Chrome, FF e Opera.
PS Você pode anexar cordas diretamente
developer.mozilla.org
Posso usar - 94% maio de 2020
Polyfill
fonte
.appendChild()
, mas adicionando-o ao início é.prepend()
, em vez de furar a convenção e chamando-o.prependChild()
append()
existe também, funciona da mesma maneira queprepend()
, mas no finalprepend
enquanto descobri que já é isso. :( Ok, não existia no passado.Você pode implementá-lo diretamente em todos os seus elementos html na janela.
Como isso :
fonte
prepend
é o equivalente a baunilha JS, sem a necessidade de um protótipo. Será padrão em ES7, e você deve usar, se possível, para a sua aplicaçãoResposta aceita refatorada em uma função:
fonte
eElement
que faz sentido. E para isso, preciso ler a pergunta. Na maioria das vezes, apenas verifico o título e vou diretamente para a resposta, ignorando os detalhes da pergunta.A menos que eu tenha entendido errado:
Ou
Embora pareça na sua descrição que haja alguma condição anexada,
fonte
Eu acho que você está procurando a função .prepend no jQuery. Código de exemplo:
fonte
Eu criei esse protótipo para adicionar elementos ao elemento pai.
fonte
https://www.w3schools.com/jsref/met_node_insertbefore.asp
fonte