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

我想能够添加多个行到一个股份也删除它们。 我在页面顶部有一个用于添加内容的“+”button。 然后在每一行的右边有一个“ – ”button，用于删除该行。 我只是无法弄清楚在这个例子中的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() { 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 2

要删除节点，你可以尝试这个解决scheme，它帮助了我。

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

Answer 3

您可以使用此function将一个子元素添加到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 4

请尝试下面的生成

  function addRow() { var e1 = document.createElement("input"); e1.type = "text"; e1.name = "name1"; var cont = document.getElementById("content") cont.appendChild(e1); } 

Answer 5

为该button做一个类让我们说：

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

你的js应该是这样的：

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