使用javascript/jquery动态创建div

Question

我在html中有两个div,叫做"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.

Answer 1

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

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

Answer 2

您应该在 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>

请记住，在 Javascript 中做很多事情并不需要 jQuery。它只是一个帮助你“少写多做”的库。