Javascript 使用JS复制包含脚本/样式标记的div

我有以下html代码：

<table><tbody><tr><td>
      <div id="div_1">
          <style>...</style>
          <div><label> 1 </label></div>
          <div><input type="text" name="text_1"/></div>
          <script>$("#text_1").mask("99/99/9999");</script>   
          <div><label><a onclick="javascript:insert_div()"> </a></label></div>  
          ...    
      </div>                    
      ...                
      <div id="div_20">
           <style>...</style>
           <div><label> 1 </label></div>
           <div><input type="text" name="text_20"/></div>
           <script>$("#text_20").mask("99/99/9999");</script>   
           <div><label><a onclick="javascript:insert_div()"> </a></label></div>  
           ...    
      </div>
</td></tr></tbody></table>  

...
1.
$（“#text_1”）.mask（“99/99/9999”）；
...    
...                
...
1.
$（“#text_20”）.mask（“99/99/9999”）；
...    

这就产生了（实际上是从1到20）：

---

我需要的是在用户按下箭头按钮时插入一个全新的div。它应该用脚本和样式复制div，并在其后插入一个新的数字（例如21，然后是22，等等）。

我给你一个基本的想法：剩下的如果作为练习，就像老师说的：

<script type="text/javascript">
 var last_inserted = 0;

 function insert_div(){
     $d = $("#div_" + last_inserted).clone();
     $d.attr('id', 'div_' + last_inserted++);
     $("table").append($d);
 }
</script>

最后插入的变量=0；
函数insert_div（）{
$d=$（“#div_uuu”+最后插入的_u）。克隆（）；
$d.attr（'id'，'div_u'+最后插入的++）；
$（“表”）。追加（$d）；
}

另外：

可能不正确（未经测试）

---

或者：

或者

这纯粹是一个指导性示例，说明了执行此任务的另一种方法。提供想法是故意罗嗦的

建议：使用jQuery时避免使用基于属性的事件处理程序：

澄清我的第一个评论。如果使用

onclick=javascript

处理程序，则将事件的注册放在HTML中，与脚本中的实际处理程序分开。“jQuery方法”是使用

.click（）

和我在下面使用的非常有用的

.on（）

等方法，将处理函数应用于元素的选择。这使得维护页面变得更容易，因为您不需要在HTML中查找JavaScript片段。jQuery事件处理程序还支持将同一事件的多个处理程序附加到一个元素，而这是使用

onclick=

无法完成的

显示的概念：

• 为下一个id号使用全局计数器，每次使用后只需将其递增
• 在动态添加元素时，使用委托事件处理程序处理“添加”单击（因此在以后才存在）
• 使用存储在虚拟
  块中的模板保存模板HTML（此

  文本/模板

  类型未知，因此被所有浏览器忽略。这也使得维护变得轻而易举
• 用新的id信息替换模板中的占位符标记
• 使用

  $（HTML）

• 在新行中查找子体以添加诸如

  掩码

  之类的内容
• 追加新行

JSFiddle:

---

如果您有任何疑问，我很乐意解释其中的任何部分。我意识到，与您现有的操作方式相比，这可能有点令人震惊：）

那么问题出在哪里？我不知道如何实现“insert\u div”功能来完成此操作。不要这样做。使用jQuery注册事件并将

掩码连接到副本。如果您有jQuery，请避免使用基于属性的事件处理程序。@TrueBlueAussie您知道jQuery只是一个JS框架，对吗？它所能做的一切都可以在普通的JS中轻松完成。@Shomz：在原始Javascript中进行多事件注册（尤其是使用基于属性的处理程序）并不容易或更短。您知道Jquery是为了简化代码而设计的，是吗？；）也许值得一提的是，她还需要某种计数器（用于那些id和输入名称，但即使是这些计数器也可以被重写为类和数组输入名称）。最后插入的id代码几乎只因效率低下而遭到否决：）是的，@TrueBlueAussie这么说。计算元素很容易，跟踪插入的项目也很容易。@M.Page感谢您的帮助。尽管如此，我的表有边框，当我执行这段代码时，div被附加在底部边框之后…=/这确实是一个非常干净的示例。即使is现在对我没有帮助，也要感谢您的分享。@carla:如果您提供您的整个页面和样式，我可以向您展示这些技术确实可以解决您眼前的问题：）“天地万物，@TrueBlueAusie，比您的哲学中所梦想的还要多”。我在PHP中的应用程序有很多生成HTML的函数。例如，要生成掩码，调用一个函数并传递元素的id，几乎所有内容都是在其他地方使用的函数。我不能改变一切。然而，我非常感谢你的慷慨提议。我会把你们说的话写下来，然后再回来。
// Declare a global counter for our new IDs
id = 2;

// Listen for click events at a non-changing ancestor element (delegated event handler)
$(document).on('click', '.addnew', function(e){

    // get the HTML of the template from the dummy script block
    var template = $('#template').html();

    // Change the template names etc based on the new id
    template = template.replace('{name}', 'name' + id).replace('{id}', id);

    // Increase next id to use
    id++;

    // Convert the HTML into a DOM tree (so we can search it easily)
    var $template= $(template);

    // Apply the mask to the newly added input - alter this to suit
    $template.find('input').mask("99/99/9999");

    // Append the new row
    $('table').append($template);

    // stop the link from moving to page top
    return false;
});