Agregar/eliminar HTML dentro de div usando JavaScript

Nuestros desarrolladores estrellas agotaron sus depósitos de café, en su búsqueda día y noche por la resolución, hasta que Víctor halló el arreglo en GitHub y en este momento la comparte contigo.

Solución:

Puedes hacer algo como esto.

function addRow() 
  const div = document.createElement('div');

  div.className = 'row';

  div.innerHTML = `
    
    
     
       Checked? 
    
    
  `;

  document.getElementById('content').appendChild(div);


function removeRow(input) 
  document.getElementById('content').removeChild(input.parentNode);

Para mi mayor sorpresa, les presento un método DOM que nunca he usado antes de buscar en Google esta pregunta y encontrar antiguos insertAdjacentHTML en MDN (ver CanIUse?insertAdjacentHTML para una tabla de compatibilidad bastante verde).

Así que usándolo escribirías

function addRow () 
  document.querySelector('#content').insertAdjacentHTML(
    'afterbegin',
    `

      
      
      Checked?
      
    
`      
  )


function removeRow (input) 
  input.parentNode.remove()

Puede usar esta función para agregar un elemento secundario a un elemento DOM.

function addElement(parentId, elementTag, elementId, html) 

 


// Adds an element to the document


    var p = document.getElementById(parentId);
    var newElement = document.createElement(elementTag);
    newElement.setAttribute('id', elementId);
    newElement.innerHTML = html;
    p.appendChild(newElement);




function removeElement(elementId) 



    // Removes an element from the document
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);

Te mostramos las reseñas y valoraciones de los lectores

Si te gustó nuestro trabajo, tienes el poder dejar una sección acerca de qué le añadirías a esta división.

---

---

Utiliza Nuestro Buscador