Создание множественного div динамически с использованием javascript

Question

У меня есть элемент div и есть класс для него, я хочу создать несколько div с помощью этого класса, но я не хочу создавать вложенные div, я хочу создать div снаружи с помощью javascript, i б 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
• следует приложить к element.parentElement используя appendChild
• Вы никогда не определить $element, это должно быть просто element или $(element)

Но даже если вы это исправить, я не понимаю, что вы пытаетесь достичь.

Ваш пример на самом деле не показывает, почему для этого вам понадобится специальный обработчик привязки. Кажется, мне по умолчанию привязок KNOCKOUT должно хватить:

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