使用Javascript动态创建多个div

Question

我有 div 元素并有一个类。 我想使用该类创建多个 div，但我不想创建嵌套 div，我想使用 Javascript 在外部创建 div。 我使用了 append 属性，但它在下面创建的嵌套 div 是我需要的 html。 我需要帮助。

 //have this div
 <div data-bind="dynamicDiv"  class="one"></div>

 //need to create multiple div 
  
    //Knockoutjs && javascript//
   
 ko.bindingHandlers.dynamicDiv = {
    init: function (element, valueAccessor) {
        var parentclassName = element.className;         
            lastId += 1;
          
    ///it is creating nested div, want to create outside of parentclass not inside the parent class
           $element.append(DivHtml(lastId,parentclassName));          
  },
  };

 function DivHtml(lastId,parentclassName) {
       Newdiv = document.createElement('div');
        Newdiv.id = "divId_"+lastId
        document.querySelector("." + parentclassName).appendChild(Newdiv)
  }       

Answer 1

修复您当前的代码：

• 在DivHtml ，第三行应该是return NewDiv
• init应该使用appendChild附加到element.parentElement
• 你永远不会定义$element ，它应该只是element或$(element)

但即使你解决了这个问题，我也不明白你想要达到什么目的。

您的示例并没有真正说明为什么您需要一个自定义绑定处理程序。 在我看来，淘汰赛的默认绑定就足够了：

<div data-bind="attr: { id: 'divId_' + ++lastId }" class="one"></div>

如果您需要动态复制类名，如果我是您，我会在视图模型中处理它。 还要查看template和foreach绑定。

 var className = "one"; var idPrefix = "divId_"; var nrOfElements = 5; var elements = []; for (var i = 0; i < nrOfElements; i += 1) { elements.push({ className: className, id: idPrefix + i }); }; ko.applyBindings({items: elements });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div data-bind="foreach: elements"> <div data-bind="attr: { id: id, 'class': className }, text: id"></div> </div>