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

上一篇: dynamically creating div using javascript/jquery

下一篇: Javascript creating <div> on the fly