使用 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>