[英]Add/remove HTML inside div using JavaScript
我希望能够将多行添加到 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()">
你可以做这样的事情。
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);
}
最令我惊讶的是,我向您展示了一个我从未使用过的 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>
您可以使用此函数向 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);
}
另一种解决方案是使用getDocumentById
和insertAdjacentHTML
。
代码:
function addRow() {
const div = document.getElementById('content');
div.insertAdjacentHTML('afterbegin', 'PUT_HTML_HERE');
}
在这里查看更多详细信息: Element.insertAdjacentHTML()
为该按钮创建一个类让我们说:
`<input type="button" value="+" class="b1" onclick="addRow()">`
你的 js 应该是这样的:
$(document).ready(function(){
$('.b1').click(function(){
$('div').append('<input type="text"..etc ');
});
});
要删除节点,您可以尝试此解决方案,它对我有帮助。
var rslt = (nodee=document.getElementById(id)).parentNode.removeChild(nodee);
使用 JavaScript 在 div 中添加 HTML
句法:
element.innerHTML += "additional HTML code"
要么
element.innerHTML = element.innerHTML + "additional HTML code"
使用 JavaScript 删除 div 中的 HTML
elementChild.remove();
请尝试以下生成
function addRow()
{
var e1 = document.createElement("input");
e1.type = "text";
e1.name = "name1";
var cont = document.getElementById("content")
cont.appendChild(e1);
}
我知道这花了太长时间,这意味着你可以写得更简短一些。
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>
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.