javascript - 如何复制元素并更改其子 ID，包括使用的脚本？

Question

我正在使用 datetimepicker 让用户选择一个日期。当按下按钮时，日期选择器将被复制，因此用户可以选择另一个日期。

这是我的代码：

//add button
<button id="addDayButton" onclick="addDay()">Add Another Date Picker</button> 

//Script for duplicate
<script>
document.getElementById('addDayButton').onclick = addDay;
 var i = 0;
 var original = document.getElementById('duplicator');
  function addDay() {
         var clone = original.cloneNode(true);  
          clone.id = "duplicator" + ++i; 
         original.parentNode.appendChild(clone);
   }
</script>

   //NEED TO BE DUPLICATED 
    <div class="form-group" id="duplicator" >
       <div class='input-group date' id='datetimepicker3' > 
          <input type='text' class="form-control"  />
           <span class="input-group-addon">
               <span class="glyphicon glyphicon-time"></span>
           </span>
        </div>

        //How to also change the id here????
        <script type="text/javascript">
           $(function () {
             $('#datetimepicker3').datetimepicker({format: 'LT'});
             });
        </script>
    </div>

由于我要复制的部分中有 javascript，我怎样才能更改它的 id 以便重复项具有不同的 id？

在此示例中，datepicker 的 id 是 #datetimepicker3。所以理想情况下，下一个重复元素的 id 应该是 #datetimepicker4，其函数中的 id 也是如此。

预先感谢您的帮助。

Answer 1

所以在做了一些研究之后，我找到了解决方案。

<script>
                                 var toDuplicate =   
                        "<div class=\"countLenth\"  style=\"border:0px;height:50px;width:100%; background:#E6E7E8;box-shadow: none;display:inline-block;float:right;\">" + 
                            "<div class=\"form-group\" >" + 
                             "<div class=\"input-group date\" id=\"eventDatePicker_{NUM}\"  style=\"height:50px;\">"+
                                  "<input style=\"height:50px;background:transparent;border:none;box-shadow: none; \" placeholder=\"Date\" class=\"form-control\"  type=\"text\"  >"+
                                         "<span class=\" input-group-addon\" style=\"background:transparent;border:none;box-shadow: none; \"><span class=\"glyphicon glyphicon-calendar\"></span> </span>"  +"</div></div></div>"
                                 + "<script>"+"alert(\" Create script #eventDatePicker_{NUM}\");"+"$(function () {$('#eventDatePicker_{NUM}').datetimepicker({ format: 'YYYY-MM-DD' });});"+"</"+"script>"


                             var count =0;

    $('#addDayButton').click(function() {
         count ++;
        $('#duplicateContainer').append(toDuplicate.replace(/{NUM}/g,count ));

//        for(var i =0; i<$('countLenth').length + 1; i++ ){
//            
//        }

    });


                                </script>