Digamos que você tenha algum HTML que seja uma string:
let string_of_html = ` Cool `;Talvez venha de uma API ou você mesmo o construiu a partir de literais de modelo ou algo assim.
Você pode usar innerHTMLpara colocar isso em um elemento, como:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Você tem um pouco mais de controle se usar a insertAdjacentHTMLfunção, pois pode colocar o novo HTML em quatro lugares diferentes:
text inside node Você usa como ...
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Há circunstâncias em que você pode querer ter o DOM recém-criado ainda em JavaScript antes de fazer qualquer coisa com ele. Nesse caso, você pode analisar sua string primeiro, como:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Isso lhe dará um DOM completo, então você precisará arrancar o filho que adicionou. Supondo que tenha apenas um elemento pai, é como ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Agora você pode mexer com isso new_elementconforme necessário, suponho que antes de fazer o que precisa fazer com ele.
É um pouco mais simples de fazer isso:
let new_element = document.createRange() .createContextualFragment(string_of_html);Você obterá o elemento diretamente como um fragmento de documento para anexar ou o que for necessário. Este método é notável por executar realmente os s que encontra dentro, o que pode ser útil e perigoso.
Há uma quantidade considerável de nuances em tudo isso. Por exemplo, o HTML precisa ser válido. HTML malformado simplesmente não vai funcionar. Malformado também pode pegar você de surpresa, como colocar um em um
Koen Schaft escreveu “Criar um nó DOM a partir de uma string HTML” que cobre o que temos aqui, mas com mais detalhes e com mais dicas.
irá falhar porque está faltando um. #####