Ajouter/supprimer du HTML à l'intérieur d'une division en utilisant JavaScript

Question

Je veux pouvoir ajouter plusieurs rangées à un div et aussi les supprimer. J'ai un bouton "+" en haut de la page qui sert à ajouter du contenu. Ensuite, à droite de chaque ligne, il y a un bouton "-" qui permet de supprimer cette même ligne. Je n'arrive pas à comprendre le code javascript de cet exemple.

Voici ma structure HTML de base :

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

<div id="content">

</div>

Voici ce que je veux ajouter à l'intérieur de la division de contenu :

<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

Vous pouvez faire quelque chose comme ça.

function addRow() {
  const 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 2

À ma plus grande surprise, je vous présente une méthode DOM que je n'ai jamais utilisée avant de googler cette question et de trouver l'ancienne méthode. insertAdjacentHTML en MDN (voir CanIUse?insertAdjacentHTML pour une jolie table de compatibilité verte).

Donc, en l'utilisant, vous écrirez

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 3

Une autre solution consiste à utiliser getDocumentById y insertAdjacentHTML .

Code :

function addRow() {

 const  div = document.getElementById('content');

 div.insertAdjacentHTML('afterbegin', 'PUT_HTML_HERE');

}

Vérifiez ici, pour plus de détails : Element.insertAdjacentHTML()

Answer 4

Vous pouvez utiliser cette fonction pour ajouter un enfant à un élément 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

Je sais que ça a pris trop de temps, ça veut dire que tu peux écrire plus brièvement.

    function addRow() {
        var inputName, inputValue, label, checkBox, checked, inputDecrease, content, Ptag;
        // div
        content = document.getElementById('content');
        // P tag
        Ptag = document.createElement('p');
        // first input
        inputName = document.createElement('input');
        inputName.type = 'text';
        inputName.name = 'name';
        // Second input
        inputValue = document.createElement('input');
        inputValue.type = 'text';
        inputValue.name = 'Value';
        // Label
        label = document.createElement('label');
        // checkBox
        checkBox = document.createElement('input');
        checkBox.type = 'checkbox';
        checkBox.name = 'check';
        checkBox.value = '1';
        // Checked?
        checked = document.createTextNode('Checked?');
        // inputDecrease
        inputDecrease = document.createElement('input');
        inputDecrease.type = 'button';
        inputDecrease.value = '-';
        inputDecrease.setAttribute('onclick', 'removeRow(this)')
        // Put in each other
        label.appendChild(checkBox);
        label.appendChild(checked);
        Ptag.appendChild(inputName);
        Ptag.appendChild(inputValue);
        Ptag.appendChild(label);
        Ptag.appendChild(inputDecrease);
        content.appendChild(Ptag);
    }

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

* {
    margin: 3px 5px;
}

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

<div id="content">

</div>