有没有办法动态创建嵌套的div onclick？

我试图创建一个页面，用户可以通过添加额外的div或嵌套的div（尽可能深的层数）来自定义表单以满足他们的需求。在每个div中，我想要有文本输入和一个按钮，在同一级别添加另一个div，并在其中嵌入一个div。两个div都应该有一个文本输入和一个按钮来完成同样的事情。有没有办法动态创建嵌套的div onclick？

但是我有点卡住了。当我尝试创建一个嵌套的div时，我总是最终将其添加到最底层而不是其父层。

<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>

来源

2016-01-01 Courtney

你能提供一个小提琴吗？ –

'addSub'似乎没有添加任何按钮。我相信你想重新组织你的代码，以便两个点击处理程序调用一些函数来创建div。 –

然后，请注意，无论使用哪个按钮调用它，addNode都执行完全相同的操作。还要注意，嵌套结构是短暂的：这种形式就是将所有输入发布到服务器的平面列表中。 –

这里是一个完整的解决方案，你需要记住的是，如果你需要绑定在你生产的投入和按钮外的事件，你就必须这样做，里面的功能ADDNODE或addSub像我一样为Click事件在按钮上。

工作例如：https://jsfiddle.net/r70wqav7/

var counter = 1; 
 
function addNode(element) { 
 
\t counter++; 
 
    var new_entry="Entry "+counter+"<br><input type='text' name='myInputs'><br>"; 
 
    element.insertAdjacentHTML("beforebegin",new_entry); 
 
} 
 
function addSub(element) { 
 
\t counter++; 
 
\t var new_sub_entry="<div class='block'>" 
 
    \t \t \t \t \t \t \t \t +"Entry "+counter+"<br><input type='text' name='myInputs'><br>" 
 
        +"<div class='buttons'>" 
 
        +"<input class='add_sub_button' type='button' value='add nested'>" 
 
        +"<input class='add_button' type='button' value='Add another text input' >" 
 
        +"</div>" 
 
        +"</div><br />" 
 
        +"</div>"; 
 
    element.insertAdjacentHTML("beforebegin",new_sub_entry); 
 
    var blocks=element.parentNode.getElementsByClassName("block"); 
 
    blocks[blocks.length-1].getElementsByClassName("add_sub_button")[0].addEventListener("click",function(){ 
 
    \t addSub(this.parentNode); 
 
    }); 
 
    blocks[blocks.length-1].getElementsByClassName("add_button")[0].addEventListener("click",function(){ 
 
    \t addNode(this.parentNode); 
 
    }); 
 
} 
 

 
var buttons=document.getElementsByClassName("add_button"); 
 
for(i=0;i<buttons.length;i++){ 
 
\t buttons[i].addEventListener("click",function(){ 
 
    \t \t addNode(this.parentNode); 
 
    }); 
 
} 
 
var nested_buttons=document.getElementsByClassName("add_sub_button"); 
 
for(i=0;i<buttons.length;i++){ 
 
\t nested_buttons[i].addEventListener("click",function(){ 
 
    \t \t addSub(this.parentNode); 
 
    }); 
 
}

div.block{ 
 
    padding:5px; 
 
    border:2px solid #000; 
 
}

<form class="form" method="POST"> 
 
    <div class="block"> 
 
     Entry 1<br><input type="text" name="myInputs"><br> 
 
     <div class="buttons"> 
 
      <input class="add_sub_button" type="button" value="add nested"> 
 
      <input class="add_button" type="button" value="Add another text input" > 
 
     </div> 
 
    </div><br /> 
 
     <input type="submit" value = "answer" multiple="multiple"/> 
 
</form>

编辑：有一个错误的结合上更新才能正常工作

来源

2016-01-01 08:47:17 skpapam

这里嵌套项目的单击事件是另外一个样例，这使得使用我在前面的评论中提到的概念。我已将“添加项目”按钮移到窗体外，并更改了用于确定添加的每个新项目的文本的方法。我计算文档中现有项目的数量并将其增加，使用它作为字符串“条目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>

来源

2016-01-01 09:06:11 enhzflep

有没有办法动态创建嵌套的div onclick？

回答

相关问题