Inyección HTML

innerHTML

Usamos .innerHTML para obtener y establecer contenido HTML.

  
  <section class="section" id="section">Section Content</section>
  

  
  let element = document.querySelector('#section');

  let content = element.innerHTML;

  console.log(content); //-> Section Content

  // Set HTML content
  element.innerHTML = "We can dynamically change the HTML.";

  // Add HTML to end
  element.innerHTML += " Add this after.";

  // Add HTML at beginning
  element.innerHTML = "We can add this before. " + element.innerHTML; 

  // Inject entire element
  element.innerHTML += "
A new paragraph
";
  

createElement

createElement nos permite, como su nombre lo indica, crear un nuevo elemento. Este es un nodo DOM totalmente manipulable, y podemos agregarle clases y atributos. Cuando estemos listos, usaremos insertBefore() para inyectarlo en el DOM.

  
  <section class="section" id="section">Section Content</section>
  

  
  let element = document.querySelector('#section');

  let div = document.createElement("div");

  div.innerHTML = "Your content";

  // Insert div element before our element 
  element.parentNode.insertBefore(div, element);

  // Insert div element after our element
  element.parentNode.insertBefore(div, element.nextSibling);
  

Eliminar un elemento del DOM

Hay dos formas de eliminar un elemento del DOM, y ambas son realmente fáciles. Si solo desea ocultar el elemento con CSS, puede usar la propiedad de estilo.

  
  <section class="section" id="section">Section Content</section>
  

  
  let element = document.querySelector('#section');
  element.style.display = "none";
  

Si desea eliminar el elemento del DOM por completo, puede utilizar el método removeChild.

  
  <section class="section" id="section">Section Content</section>
  

  
  let element = document.querySelector('#section');
  element.parentNode.removeChild(element);