javascript - 一次添加一个div，点击添加更多内容

如何每次添加更多内容时单独添加一次div？现在它拷贝一切DIV中，并在双打吧..javascript - 一次添加一个div，点击添加更多内容

<script> 
function addInput(divName){ 
     var newdiv = document.createElement('div'); 
     newdiv.innerHTML = document.getElementById(divName).innerHTML; 
     document.getElementById(divName).appendChild(newdiv); 
} 
</script> 
<div id="add_more_cat"> 
    <select name="category"> 
     <option selected="selected" value="1">1</option> 
    </select>           
</div> 
<a href="#" onClick="addInput('add_more_cat');">+ Add more</a>

来源

2014-03-13 Gadgetster

你可以通过看jQuery来削减语法简化了操作关闭并使用jQueries克隆操作您的div的基本副本，所以您可以添加到显示div每次完成..但...因为你没有指定它在JQuery中没有回答张贴。 – alexmac

'addInput'被调用一次后的预期结果是什么？ –

@alexmac你能告诉我在回答这个jQuery代码吗？ – Gadgetster

您正在尝试每一次克隆相同的标签，你的新元素添加到同一个标签了。你可能会做的是创建一个模板标签，克隆模板并将克隆添加到新标签。这样，每次点击“添加更多”时，您最终只会添加一个选择。

在这里尝试这种小提琴http://jsfiddle.net/gkf5T/1/

<script> 
function addInput(divName, template){ 
     var newdiv = document.createElement('div'); 
     newdiv.innerHTML = document.getElementById(divName).innerHTML; 
     document.getElementById(template).appendChild(newdiv); 
} 
</script> 
<div id="template"> 
    <select name="category"> 
     <option selected="selected" value="1">1</option> 
    </select>           
</div> 
<div id="add_more_cat"> 
</div> 
<a href="#" onClick="addInput('template', 'add_more_cat');">+ Add more</a>

来源

2014-03-13 18:48:31

这工作！我想知道jquery中那个较短的版本，alexmac正在谈论 – Gadgetster

http://jsfiddle.net/gkf5T/2/ 这有更新的代码使用jQuery。 –

假设你有一个空div

<div id="display></div>

假设（是屁股-U-我）你有一个行要插入遍地

<div id="add_more_cat">some html text whatever even extra divs</div>

在jQuery中你可以

var cloned = $("#add_more_cat").clone(); 
cloned.attr('id', someUnique); // this makes sure each area is addressable 

$("#display").append(cloned); 
$("#display".show(); // sometimes its best to hide first if doing a loop appends. So if so use the hide before the loop

的工作的例子是在我的github上media data

来源

2014-03-13 18:57:34 alexmac

编辑仍然，一些错误，不知道我的其他位如何更正 – alexmac

这将工作是的，但我想我应该提到，后来我将不得不记录什么是从下拉列表中选择，如果它是所有克隆我不't知道如何工作 – Gadgetster

是的，它仅仅是一个例子，并不是一个答案，但你要求在jQuery中的一个例子，你可以改变克隆的div的属性而不会影响原始的，然后重复使用原件。我的示例链接与您的问题无关，但在实际环境中显示其操作。 – alexmac

您可以使用cloneNode

<script> 
function addInput(divName){ 
    var refEl = document.getElementById(divName);// refEl can be anything ex: document.body 
    var clone = refEl.cloneNode(true); 
    refEl.parentNode.insertBefore(clone, refEl.nextSibling); 
} 
</script> 
<div id="add_more_cat"> 
    <select name="category"> 
     <option selected="selected" value="1">1</option> 
    </select>           
</div> 
<a href="#" onClick="addInput('add_more_cat');">+ Add more</a>

这里试试吧：http://jsfiddle.net/zLKXf/

来源

2014-03-13 19:03:47 aihazm

javascript - 一次添加一个div，点击添加更多内容

回答

相关问题