Javascript 有没有一种方法可以动态创建嵌套的div onclick？
我试图创建一个页面，用户可以通过添加额外的div或嵌套的div（任意深度的层）根据自己的需要自定义表单。在每个div中，我希望有文本输入和一个在同一级别上添加另一个div的按钮，以及一个嵌套div的按钮。两个div都应该有一个文本输入和一个执行相同操作的按钮 但是我有点卡住了。当我试图创建一个嵌套的div时，我总是在最底部添加它，而不是在其父级内部Javascript 有没有一种方法可以动态创建嵌套的div onclick？,javascript,html,Javascript,Html,我试图创建一个页面，用户可以通过添加额外的div或嵌套的div（任意深度的层）根据自己的需要自定义表单。在每个div中，我希望有文本输入和一个在同一级别上添加另一个div的按钮，以及一个嵌套div的按钮。两个div都应该有一个文本输入和一个执行相同操作的按钮 但是我有点卡住了。当我试图创建一个嵌套的div时，我总是在最底部添加它，而不是在其父级内部 <html> <script type="text/javascript"> var counter
<html>
<script type="text/javascript">
var counter = 1;
function addNode() {
var newDiv = document.createElement('div');
counter++;
newDiv.innerHTML = "Entry " + counter + " <br><input type='text' name='myInputs'>";
document.getElementById("dynamicInput").appendChild(newDiv);
var newButton = document.createElement('button');
newButton.type = "button";
newButton.onclick = addSub;
document.getElementById("dynamicInput").appendChild(newButton);
}
function addSub() {
var newDiv = document.createElement('div');
counter++;
newDiv.innerHTML = "Entry " + counter + " <br><input type='text' name='myInputs' style='margin:10px'>";
document.getElementById("subInput").appendChild(newDiv);
}
</script>
<form class="form" method="POST">
<div id="dynamicInput" name="dynamicInput" multiple="multiple">
Entry 1<br><input type="text" name="myInputs">
<div id="subInput" name="subInput" multiple="multiple">
<input type="button" value="add nested" onClick="addSub();">
</div>
</div>
<input type="button" value="Add another text input" onClick="addNode();" >
<input type="submit" value = "answer" multiple="multiple"/>
</form>
</html>
var计数器=1；
函数addNode（）{
var newDiv=document.createElement（'div'）；
计数器++；
newDiv.innerHTML=“条目”+计数器+”
”；
document.getElementById（“dynamicInput”）.appendChild（newDiv）；
var newButton=document.createElement（'button'）；
newButton.type=“按钮”；
newButton.onclick=addSub；
document.getElementById（“dynamicInput”）.appendChild（newButton）；
}
函数addSub（）{
var newDiv=document.createElement（'div'）；
计数器++；
newDiv.innerHTML=“条目”+计数器+”
”；
document.getElementById（“子输入”）.appendChild（newDiv）；
}
条目1
var计数器=1；
函数addNode（元素）{
计数器++；
var new_entry=“entry”+counter+”
”；
元素insertAdjacentHTML（“beforebeagin”，新条目）；
}
函数addSub（元素）{
计数器++；
var new_sub_entry=“”
+“条目”+计数器+“
”
+""
+""
+""
+""
+“
”
+"";
元素insertAdjacentHTML（“beforebeagin”，新的子条目）；
var blocks=element.parentNode.getElementsByClassName（“block”）；
blocks[blocks.length-1]。getElementsByClassName（“添加子按钮”）[0]。addEventListener（“单击”，函数（））{
addSub（this.parentNode）；
});
blocks[blocks.length-1]。getElementsByClassName（“添加按钮”）[0]。addEventListener（“单击”，函数（）{
addNode（this.parentNode）；
});
}
var buttons=document.getElementsByClassName（“添加按钮”）；
对于（i=0；i这是另一个工作示例，它利用了我在前面的评论中提到的概念。我已将“添加项”按钮移到表单外部，并更改了用于确定每个新添加项的文本的方法。我没有保留计数器，而是计算文档中现有项的数量，并将其作为字符串“Entry n”中的n
我本应该在创建新元素的按钮之前添加（附加）子项，但该子项是惰性的，在添加其他新元素之后才在按钮上调用appendChild
——最终结果相同，但效率较低，会导致性能变慢/电池寿命缩短
当单击“添加新项”时，我将使用.dynamicInput
div的.cloneNode
方法，但是这将复制所选目标的所有子项，我们仍然需要调用addEventListener
按钮，因此我选择简单地创建每个添加了“添加新项”的输入项按钮代替
<!doctype html>
<html>
<head>
<script>
"use strict";
function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);}
function allByClass(className,parent){return (parent == undefined ? document : parent).getElementsByClassName(className);}
function allByTag(tagName,parent){return (parent == undefined ? document : parent).getElementsByTagName(tagName);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
byId('addNewInputBtn').addEventListener('click', myAddNewItem, false);
var subItemBtn = document.querySelectorAll('.dynamicInput button')[0];
subItemBtn.addEventListener('click', myAddSubItem, false);
}
function makeNewItem(titleStr)
{
var div = newEl('div');
div.className = 'dynamicInput';
var heading = newEl('h3');
heading.innerText = titleStr;
div.appendChild(heading);
var input = newEl('input');
div.appendChild(input);
var btn = newEl('button');
btn.innerText = 'Add sub-items';
btn.addEventListener('click', myAddSubItem, false);
div.appendChild(btn);
return div;
}
function myAddNewItem(evt)
{
var numAlreadyExisting = allByClass('dynamicInput').length; // count number of divs with className = dynamicInput
var newNum = numAlreadyExisting + 1;
var newInputPanel = makeNewItem('Entry ' + newNum);
byId('myForm').appendChild(newInputPanel);
return false;
}
function myAddSubItem(evt)
{
evt.preventDefault(); // stops this button causing the form to be submitted
var clickedBtn = this;
var inputDiv = clickedBtn.parentNode;
var newInput = newEl('input');
inputDiv.appendChild(newInput);
inputDiv.appendChild(clickedBtn);
}
</script>
</head>
<body>
<form id='myForm'>
<div class='dynamicInput'>
<h3>Entry 1</h3>
<input type='text'/><button>Add sub-item</button>
</div>
</form>
<button id='addNewInputBtn'>Add new item</button>
</body>
</html>
“严格使用”；
函数byId（id，parent）{return（parent==未定义？文档：parent）.getElementById（id）；}
函数allByClass（className，parent）{return（parent==未定义？文档：parent）.getElementsByClassName（className）；}
函数allByTag（标记名，父项）{返回（父项==未定义？文档：父项）.getElementsByTagName（标记名）；}
函数newEl（tag）{returndocument.createElement（tag）；}
函数newText（txt）{return document.createTextNode（txt）；}
window.addEventListener（'load'，onDocLoaded，false）；
函数onDocLoaded（evt）
{
byId（'addNewInputBtn'）。addEventListener（'click'，myAddNewItem，false）；
var subItemBtn=document.querySelectorAll（“.dynamicInput按钮”）[0]；
subItemBtn.addEventListener（'click'，myAddSubItem，false）；
}
函数makeNewItem（titleStr）
{
var div=newEl（“div”）；
div.className='dynamicInput'；
var标题=纽尔（'h3'）；
heading.innerText=标题栏；
儿童分部（标题）；
var输入=纽尔（‘输入’）；
div.appendChild（输入）；
var btn=newEl（“按钮”）；
btn.innerText='添加子项'；
btn.addEventListener（'click'，myAddSubItem，false）；
儿童分部（btn）；
返回div；
}
函数myAddNewItem（evt）
{
var numAlreadyExisting=allByClass（'dynamicInput'）。length；//计算className=dynamicInput的div数
var newNum=numAlreadyExisting+1；
var newInputPanel=makeNewItem（'Entry'+newNum）；
byId（'myForm'）.appendChild（newInputPanel）；
返回false；
}
函数myAddSubItem（evt）
{
evt.preventDefault（）；//停止此按钮，导致表单提交
var clickedBtn=此；
var inputDiv=clickedBtn.parentNode；
var newInput=newEl（“输入”）；
inputDiv.appendChild（newInput）；
inputDiv.appendChild（单击BTN）；
}
条目1
增加分项
添加新项目
你能提供一个提琴吗？addSub
似乎没有添加任何按钮。我相信你想重新组织你的代码，以便两个单击处理程序都调用一些函数来创建div。然后，请注意，addNode
执行完全相同的操作，而不管哪个按钮调用它。还要注意嵌套结构是短暂的：此表单将只发布所有输入