javascript - insertar - innerhtml que es

Añadir/eliminar HTML dentro de div usando JavaScript

Question

Quiero poder agregar varias filas a un div y también eliminarlas. Tengo un botón ''+'' en la parte superior de la página para agregar contenido. Luego, a la derecha de cada fila, hay un botón ''-'' para eliminar esa fila. Simplemente no puedo entender el código javascript en este ejemplo.

Esta es mi estructura básica de HTML:

<input type="button" value="+" onclick="addRow()">

<div id="content">

</div>

Esto es lo que quiero agregar dentro del contenido div:

<input type="text" name="name" value="" />
<input type="text" name="value" value="" />
<label><input type="checkbox" name="check" value="1" />Checked?</label>
<input type="button" value="-" onclick="removeRow()">

Answer 1

Hacer una clase para ese botón digamos:

`<input type="button" value="+" class="b1" onclick="addRow()">`

tu js debería verse así:

$(document).ready(function(){
  $(''.b1'').click(function(){
      $(''div'').append(''<input type="text"..etc '');
  });
});

Answer 2

Para eliminar el nodo puedes probar esta solución me ayudó.

var rslt = (nodee=document.getElementById(id)).parentNode.removeChild(nodee);

Answer 3

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

Así que usándolo escribirías

function addRow () {
  document.querySelector(''#content'').insertAdjacentHTML(
    ''afterbegin'',
    `<div class="row">
      <input type="text" name="name" value="" />
      <input type="text" name="value" value="" />
      <label><input type="checkbox" name="check" value="1" />Checked?</label>
      <input type="button" value="-" onclick="removeRow(this)">
    </div>`      
  )
}

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

<input type="button" value="+" onclick="addRow()">

<div id="content">
</div>

Answer 4

Puede utilizar 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);
}

Answer 5

Puedes hacer algo como esto.

function addRow() {
    var div = document.createElement(''div'');

    div.className = ''row'';

    div.innerHTML =
        ''<input type="text" name="name" value="" />/
        <input type="text" name="value" value="" />/
        <label> <input type="checkbox" name="check" value="1" /> Checked? </label>/
        <input type="button" value="-" onclick="removeRow(this)">'';

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

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

Answer 6

por favor intenta seguir para generar

 function addRow()
    {
        var e1 = document.createElement("input");
        e1.type = "text";
        e1.name = "name1";

        var cont = document.getElementById("content")
        cont.appendChild(e1);

    }