Como anexar esta string HTML
var str = '<p>Just some <span>text</span> here</p>';
para o DIV com o ID 'test'
que está no DOM?
(Btw div.innerHTML += str;
não é aceitável.)
javascript
html
dom
browser
Šime Vidas
fonte
fonte
innerHTML
coloca a string no elemento (substituindo todos os filhos), enquantoinsertAdjacentHTML
coloca (1) antes do elemento, (2) depois do elemento, (3) dentro do elemento antes do primeiro filho ou (4) dentro do elemento após o último filho.insertAdjacentHTML
é mais rápido do que anexar ainnerHTML
, porqueinsertAdjacentHTML
não serializa e reanalisa os filhos existentes do elemento.insertAdjacentHTML
mantém os valores dos elementos alterados do formulário, ao passo que anexar parainnerHTML
reconstruir o elemento e perder todo o contexto do formulário.Isso é aceitável?
jsFiddle .
Mas , a resposta de Neil é uma solução melhor.
fonte
innerHTML
?insertAdjacentHTML
.atuação
AppendChild
(E) é mais de 2x mais rápido do que outras soluções no Chrome e Safari,insertAdjacentHTML
(F) é mais rápido no Firefox. OinnerHTML=
(B) (não confunda com+=
(A)) é a segunda solução rápida em todos os navegadores e é muito mais prático do que E e F.Detalhes
Ambiente de configuração (10/07/2019) MacOs High Sierra 10.13.4 no Chrome 75.0.3770 (64 bits), Safari 11.1.0 (13604.5.6), Firefox 67.0.0 (64 bits)
Você pode reproduzir o teste em sua máquina aqui
Exibir trecho de código
fonte
A ideia é usar
innerHTML
em um elemento intermediário e, em seguida, mover todos os seus nós filhos para onde você realmente os desejaappendChild
.Isso evita apagar qualquer manipulador de eventos,
div#test
mas ainda permite que você anexe uma string de HTML.fonte
O jeito certo é usar
insertAdjacentHTML
. No Firefox anterior ao 8, você pode voltar a usarRange.createContextualFragment
sestr
não contiverscript
tags.Se o seu
str
contémscript
tags, você precisa remover osscript
elementos do fragmento retornado porcreateContextualFragment
antes de inserir o fragmento. Caso contrário, os scripts serão executados. (insertAdjacentHTML
marca os scripts como não executáveis.)fonte
createContextualFragment
. Eu estava procurando uma maneira de fazer alguns inclusões de html com scripts executados apenas se o usuário concordar em definir um cookie.Hack rápido :
Casos de uso :
1: Salve como arquivo .html e execute em chrome ou firefox ou edge. (IE não funciona)
2: Use em http://js.do
Em ação: http://js.do/HeavyMetalCookies/quick_hack
Dividido com comentários:
Razão pela qual postei:
JS.do tem dois itens obrigatórios:
Mas não mostra mensagens console.log. Vim aqui em busca de uma solução rápida. Eu só quero ver os resultados de algumas linhas de código do scratchpad, as outras soluções dão muito trabalho.
fonte
Por que isso não é aceitável?
document.getElementById('test').innerHTML += str
seria a maneira clássica de fazer isso.
fonte
#test
embora. Isso geralmente não é desejável.Isso pode resolver
fonte
InnerHTML limpa todos os dados como eventos para nós existentes
anexar filho com firstChild adiciona apenas o primeiro filho a innerHTML. Por exemplo, se tivermos que acrescentar:
apenas text1 irá aparecer
Que tal isso:
adiciona tag especial a innerHTML anexando filho e, em seguida, edita outerHTML excluindo a tag que criamos. Não sei o quão inteligente é, mas funciona para mim ou você pode alterar outerHTML para innerHTML para que não precise usar a função substituir
fonte
Mais curto - 18 caracteres (não confunda
+=
(menção por OP) com=
mais detalhes aqui )Exibir trecho de código
fonte