使用JavaScript在div中添加/删除HTML

Question

我希望能够在div中添加多行并删除它们.我在页面顶部有一个"+"按钮,用于添加内容.然后在每一行的右边有一个' - '按钮,用于删除那一行.我只是无法弄清楚这个例子中的javascript代码.

这是我的基本HTML结构:

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

<div id="content">

</div>

这是我想在内容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

你可以做这样的事情.

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

另一种解决方案是使用getDocumentById和insertAdjacentHTML。

代码：

function addRow() {

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

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

}

检查此处，了解更多详细信息： Element.insertAdjacentHTML()

Answer 3

令我最大的惊讶的是，我向您介绍了一个从未使用过的DOM方法，在对这个问题进行解答并insertAdjacentHTML在MDN上找到古老的方法之前（请参阅CanIUse？insertAdjacentHTML以获取漂亮的绿色兼容性表）。

所以用它你会写

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

我知道花了太长的时间，这意味着你可以写得更简短一些。

    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>