Digamos que tiene algo de HTML que es una cadena:
let string_of_html = ` Cool `;Tal vez provenga de una API o lo haya construido usted mismo a partir de literales de plantilla o algo así.
Puede usar innerHTMLpara poner eso en un elemento, como:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Tienes un poco más de control si sigues la insertAdjacentHTMLfunción, ya que puedes colocar el nuevo HTML en cuatro lugares diferentes:
text inside node Lo usas 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);Hay circunstancias en las que es posible que desee tener el DOM recién creado todavía en JavaScript antes de hacer algo con él. En ese caso, primero puede analizar su cadena, como:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Eso le dará un DOM completo, por lo que deberá quitar el niño que agregó. Suponiendo que solo tiene un elemento principal, es como ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Ahora puedes jugar con eso new_elementsegún sea necesario, supongo que antes de hacer lo que tienes que hacer con él.
Sin embargo, es un poco más sencillo hacer esto:
let new_element = document.createRange() .createContextualFragment(string_of_html);Obtendrá el elemento directamente como un fragmento de documento para agregar o lo que sea que necesite. Este método es notable porque ejecutará los mensajes de correo electrónico que encuentre dentro, lo que puede ser útil y peligroso.
Hay una cantidad considerable de matices en todo esto. Por ejemplo, el HTML debe ser válido. HTML mal formado simplemente no va a funcionar. Malformado también puede tomarlo por sorpresa, como poner un en un
Koen Schaft escribe "Crear un nodo DOM a partir de una cadena HTML" que cubre lo que tenemos aquí pero con más detalle y con más trampas.
fallará porque falta un. #####