使用javascript / jquery动态创建div
我有两个div在html中称为“answerdiv 1”和“answerdiv 2”。
现在我想给/创建div id唯一像“answerdiv 3”“answerdiv 4”“answerdiv 5”等。
使用javascript / jquery我该如何在这些动态创建的div中添加这些id应该是唯一的东西?
在我的项目中用户可以添加“n”个div的数量,没有严格的限制。
帮帮我。
感谢Adv
================================================== ==============================
我的HTML代码是:
<div id="answertextdiv">
<textarea id="answertext" name="answertext" placeholder="Type answer here" rows="2" cols="40" tabindex="6" onBlur="exchangeLabelsanswertxt(this);"></textarea>
</div>
我的JS代码:
function exchangeLabelsanswertxt(element)
{
var result = $(element).val();
if(result!="")
{
$(element).remove();
$("#answertextdiv").append("<label id='answertext' onClick='exchangeFieldanswertxt(this);'>"+result+"</label>");
}
}
function exchangeFieldanswertxt(element)
{
var result = element.innerHTML;
$(element).remove();
$("#answertextdiv").append("<textarea id='answertext' name='answertext' placeholder='Type answer here' rows='2' cols='40' tabindex='6' onBlur='exchangeLabelsanswertxt(this);'>"+result+"</textarea>");
}
现在从上面的代码我想追加所有的东西在唯一的“answertextdiv”ID。
如果您的div位于以下容器中:
<div id="container">
<div id="answerdiv 1"></div>
<div id="answerdiv 2"></div>
</div>
你可以做一些事情:
//Call this whenever you need a new answerdiv added
var $container = $("container");
$container.append('<div id="answerdiv ' + $container.children().length + 1 + '"></div>');
如果可能的话,尽量不要使用全局变量......他们最终会回来咬你,在这种情况下你并不需要全局变量。
你可以尝试使用这种独特的ID来创建div。
HTML
<input type="button" value="Insert Div" onClick="insertDiv()" />
<div class="container">
<div id="answerdiv-1">This is div with id 1</div>
<div id="answerdiv-2">This is div with id 2</div>
</div>
JavaScript的
var i=2;
function insertDiv(){
for(i;i<10;i++)
{
var d_id = i+1;
$( "<div id='answerdiv-"+d_id+"'>This is div with id "+d_id+"</div>" ).insertAfter( "#answerdiv-"+i );
}
}
这是DEMO
你应该在Javascript中保留一个“全局”变量,创建div的数量,并且每次创建div时都会增加它。 示例代码:
<script type="text/javascript">
var divCount = 0;
function addDiv(parentElement, numberOfDivs) {
for(var i = 0; i < numberOfDivs; i++) {
var d = document.createElement("div");
d.setAttribute("id", "answerdiv"+divCount);
parentElement.appendChild(d);
divCount++;
}
}
</script>
请记住,jQuery没有必要在Javascript中做很多事情。 这只是一个图书馆,可以帮助你“少写多做”。
链接地址: http://www.djcxy.com/p/83357.html