使用javascript动态创建div/jquery

我在html中有两个名为“answerdiv 1”&“answerdiv 2”的div。使用javascript动态创建div/jquery

现在我想创建div id，如“answerdiv 3”，“answerdiv 4”，“answerdiv 5”等。

使用javascript/jquery如何在这些动态创建的div中添加这些id应该是唯一的东西？

在我的项目中用户可以添加“n”个div的数量，没有严格的限制。

帮帮我。

谢谢进阶

======================================= =========================================

我的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。

来源

2013-09-24 Kajal

你能不能给我们有可能与你工作的任何HTML的例子吗？ –

这可以帮助你很多：http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery – Kingk

检查该帖子：http://stackoverflow.com/questions/867916/creating- jquery – Rami

您应该在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。这只是一个图书馆，可以帮助你“少写多做”。

来源

2013-09-24 08:03:47 mavrosxristoforos

您需要一个全局计数器（更一般地说：一个唯一的id生成器）来显式或隐式地生成id（后者例如通过选择由类标识的最后一个生成的div或它们的id前缀）。

然后尝试

var newdiv = null; // replace by div-generating code 
$(newdiv).attr('id', 'answerdiv' + global_counter++); 
$("#parent").append(newdiv); // or wherever

来源

2013-09-24 08:07:14 collapsar

如果你的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>');

如果可能的话，尽量不要使用全局变量......他们最终会回来咬你，在这种情况下你并不需要全局变量。

来源

2013-09-24 08:09:21 mitchfuku

这是一个更好的方法，因为它不使用任何全局变量。即使div不在任何容器中，您可以向这些div添加一个类并使用'$（“。myDiv”）。size（）'或'$（“。myDiv”）计算长度' – anu

var ans = $（ “＃answertextdiv”）长度; 这是显示我1只 :( – Kajal

您需要使用.children（）。length。http://api.jquery.com/children/ $（“＃answertextdiv”）。长度应该评估为1，除非你有多个answertextdiv's – mitchfuku

你可以尝试这样的东西来创建具有唯一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

来源

2013-09-24 08:39:16

var newdivcount=0; 
 
    function insertDivs(){ 
 
     newdivcount=newdivcount+1; 
 
     var id="answerdiv-"+(newdivcount); 
 
     var div=document.createElement("DIV"); 
 
     div.setAttribute("ID",id); 
 
     var input=document.createElement("TEXTAREA"); 
 
     div.appendChild(input); 
 
     document.getElementById('container').appendChild(input); 
 
    }

<button onclick="insertDivs">InsertDivs</button> 
 
     
 
     <br> 
 
<div id="container"> 
 
    <div id="answertextdiv"> 
 
     <textarea id="answertext" name="answertext" placeholder="Type answer here" rows="2" cols="40" tabindex="6" onBlur="exchangeLabelsanswertxt(this);"></textarea> 
 
    </div> 
 
    </div>

来源

2016-04-21 13:58:13 Mavie

我使用下面的JQuery代码相同

$("#qnty1").on("input",function(e) 
{ 
var qnt = $(this).val(); 
for (var i = 0; i < qnt; i++) { 
var html = $('<div class="col-lg-6 p0 aemail1"style="margin-bottom:15px;"><input type="text" onkeyup= anyfun(this) class="" name="email1'+i+'" id="mail'+i+'" > </div><div id=" mail'+i+'" class="lft-pa img'+i+' mail'+i+'" > <img class="" src="img/btn.jpg" alt="Logo" > </div> <div id="emailer1'+i+'" class=" mailid "></div>'); 

var $html=$(html); 
$html.attr('name', 'email'+i); 
$('.email1').append($html); 
} 
}

我的HTML包含如下文本框。

<input type="text" name="qnty1" id="qnty1" class="" >

和

<div class="email1"> 
</div>

来源

2016-07-20 05:42:36

使用javascript动态创建div/jquery

回答

相关问题