如何使用javascript动态生成div的id

-4

我有（+）号和（ - ）号。如果用户点击了+符号，那么它们会自动生成与新ID相同的内容。如何使用javascript动态生成div的id

现在，当用户点击+标志比div id和它下面的文本框将被更改。下面

代码DIV如下：

<div class="row" id="Div0"> 
    <div class="col-md-3"> 
    <div class="form-group"> 
     <label for="name">Last Name</label> 
     <input type="text" class="form-control" id="txtLastName0" placeholder="Enter name" required="required" /> 
    </div> 
    </div> 
    <div class="col-md-9"></div> 
</div>

现在，当用户点击+号新行与新的ID txtLastName1文本框将得到产生。

现在点击+标志如何获得文本框的新ID和与新行div。

Div1构成和TextBox1中会得到产生

来源

2017-06-20 user57304

工作简单jsbin样你似乎忘了一半的代码。另外，这里没有问题，只是一个问题陈述。什么是问题？ –

如何使用JavaScript在点击图片上创建div的动态ID和文本框ID – user57304

基本上，你应该做的是，让你想生成的DOM中的模板，当用户点击“添加”按钮，克隆此标记和附加到标记DOM（到一个容器div）。然后根据需要更新输入和div的Id。

一个简单的示例会像

<div class="row" id="template" style="display: none;"> 
    <div class="col-md-3"> 
     <div class="form-group"> 
      <label for="name">Last Name</label> 
      <input type="text" class="form-control lname" id="txtLastName" 
        placeholder="Enter name" required="required" /> 
     </div> 
    </div> 
    <div class="col-md-9"></div> 
</div> 

<button id="btnAdd">+</button> 
<div id="container"></div>

现在连线点击事件处理程序添加/ +键。您可以使用jQuery clone()方法。

$(function() { 

    $("#btnAdd").click(function(e) { 
     e.preventDefault(); 
     var childCount = $("#container").children().length; 
     var c = $("#template").clone().show(); 

     c.attr("id", "Div" + childCount); 
     c.find(".lname").attr('id', 'txtLastName' + childCount); 
     $("#container").append(c); 

    }); 

});

删除，您可以删除按钮添加一个事件处理程序和DOM删除特定的div。 jQuery remove()方法将做到这一点。根据需要使用closest()和find以获取正确的div来删除。

Here仅供您参考

来源

2017-06-20 15:07:26 Shyju

如何使用javascript动态生成div的id

回答

相关问题