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

【问题标题】：Add/remove HTML inside div using JavaScript使用 JavaScript 在 div 中添加/删除 HTML
【发布时间】：2013-07-13 02:42:45
【问题描述】：

我希望能够将多行添加到 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()">

【问题讨论】：

到目前为止你能发布你的 JavaScript 代码吗？
@elclanrs 我尝试按照本教程进行操作：dustindiaz.com/… 但没有让代码与我的示例一起使用。我还查看了他发布的更新答案，但我并不真正理解代码，因为我对 JavaScript 还很陌生。

标签： javascript html innerhtml

【解决方案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);
}

【讨论】：

我希望能够添加多行。我的问题有点不清楚，所以我编辑了它。
这支持多行。
哦，对了。只是在尝试您的代码时出错。它现在正在工作。干杯！
虽然，将输入包装在像<div class="options_part"></div>这样的div中时它不起作用
哦，知道了。您必须从父级中删除一个子级，因此将removeRow() 中的input.parentNode 更改为input.parentNode.parentNode。提醒一下，如果您向删除按钮添加更多父母，您将不得不像我刚刚所做的那样相应地更改 removeRow。

【解决方案2】：

令我最大的惊喜是，我向您展示了一个我从未使用过的 DOM 方法，然后用谷歌搜索这个问题并在 MDN 上找到古老的 insertAdjacentHTML（请参阅 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>

【讨论】：

【解决方案3】：

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

代码：

function addRow() {

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

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

}

点击此处了解更多详情： Element.insertAdjacentHTML()

【讨论】：

【解决方案4】：

您可以使用此函数将子元素添加到 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);
}

【讨论】：

【解决方案5】：

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

    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>

【讨论】：

【解决方案6】：

要删除节点，您可以尝试这个对我有帮助的解决方案。

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

【讨论】：

【解决方案7】：

使用 JavaScript 在 div 中添加 HTML

语法：

element.innerHTML += "additional HTML code"

或

element.innerHTML = element.innerHTML + "additional HTML code"

使用 JavaScript 删除 div 内的 HTML

elementChild.remove();

【讨论】：

【解决方案8】：

为那个按钮创建一个类让我们说：

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

你的 js 应该是这样的：

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

【讨论】：

他没有提到 jQuery。

【解决方案9】：

请尝试以下生成

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

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

    }

【讨论】：

【解决方案10】：

<!DOCTYPE html>
<html>
<head>
    <title>Dynamical Add/Remove Text Box</title>
    <script language="javascript">

        localStorage.i = Number(1);

        function myevent(action)
        {
            var i = Number(localStorage.i);
            var div = document.createElement('div');

            if(action.id == "add")
            {
                localStorage.i = Number(localStorage.i) + Number(1);
                var id = i;
                div.id = id;
                div.innerHTML = 'TextBox_'+id+': <input type="text" name="tbox_'+id+'"/>' + ' <input type="button" id='+id+' onclick="myevent(this)" value="Delete" />';

                document.getElementById('AddDel').appendChild(div);
            }
            else
            {
                var element = document.getElementById(action.id);
                element.parentNode.removeChild(element);
            }
        }
    </script>
</head>
<body>
    <fieldset>
    <legend>Dynamical Add / Remove Text Box</legend>
    <form>
        <div id="AddDel">
            Default TextBox:
            <input type="text" name="default_tb">
            <input type="button" id="add" onclick="myevent(this)" value="Add" />
        </div>
            <input type="button" type="submit" value="Submit Data" />
    </form>
    </fieldset>
</body>
</html>

【讨论】：

请为提问者解释一下你的代码。 :)
在这段代码中，我们可以轻松添加和删除特定的文本框。