使用 javascript/jquery 动态创建 div

Posted

技术标签:

【中文标题】使用 javascript/jquery 动态创建 div【英文标题】:dynamically creating div using javascript/jquery 【发布时间】:2013-09-29 08:05:57 【问题描述】:

我在 html 中有两个名为“answerdiv 1”和“answerdiv 2”的 div。

现在我想给/创建唯一的 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 中。

【问题讨论】:

您能给我们一些您可能正在使用的 HTML 示例吗? 这对你有很大帮助:***.com/questions/867916/… 查看该帖子:***.com/questions/867916/… 你需要一个像 for 循环这样的循环,然后你的变量计数循环是 n(如 div 3 div 4 ... n = 数字) 【参考方案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>');

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

【讨论】:

这是一种更好的方法,因为它不使用任何全局变量。即使 div 不在任何容器中,您也可以向这些 div 添加一个类并使用$(".myDiv").size()$(".myDiv").length 进行计数 var ans = $("#answertextdiv").length;这仅向我显示 1 :( 你需要使用 .children().length。 api.jquery.com/children $("#answertextdiv").length 应该评估为 1,除非您有多个 answertextdiv $("#answertextdiv").find("div").length$("#answertextdiv").children("div").length【参考方案2】:

您可以尝试这样的方法来创建具有唯一 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

【讨论】:

【参考方案3】:

您应该在 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。它只是一个帮助你“少写多做”的库。

【讨论】:

【参考方案4】:

我用下面的 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"  > </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> 

【讨论】:

【参考方案5】:

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

那就试试

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

【讨论】:

【参考方案6】:

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>

【讨论】:

【参考方案7】:

这是您可以尝试的另一种方法

// you can use dynamic Content
var dynamicContent = "Div NO "; 
// no of div you want 
var noOfdiv = 20;

for(var i = 1; i<=noOfdiv; i++)
  $('.parent').append("<div class='newdiv"+i+"'>"+dynamicContent+i+"</div>" )
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  
</div>

【讨论】:

以上是关于使用 javascript/jquery 动态创建 div的主要内容,如果未能解决你的问题,请参考以下文章

javascript jQuery的动态创建形成表单并提交

Javascript - Jquery - 插件

使用 Javascript/JQuery/Rails 3 动态添加新行

如何使用javascript验证动态生成的输入框值

使用 javascript/jquery 动态调整画布窗口的大小?

如何在 Javascript/jQuery 中动态切片数组?