CreateElement и добавить два divs

Question

Работа с createElement и appendchild с javascript. Я пытаюсь выработать и узнать, можно ли добавить divs их классы, данные и т. Д. Мои текущие сценарии задают образ в <li>, я не буду публиковать весь скрипт (он очень длинный), так как это раздел I считаю, мне нужна помощь, вот текущая функция:

function showUploadedItem (source) { 

var list = document.getElementById("index-slider-list"), 
li = document.createElement("li"), 
remove = document.createElement("div"), 
img = document.createElement("img"); 

img.src = source; 
li.appendChild(img); 
list.appendChild(li); 
} 

это выходной конец (который я в PHP echo ="";:

<ul id="index-slider-list">// this is present before loop; 
<li><img src='source-here'></li> //it starts here 
</ul> 

Пусть говорят, я хотел бы добавить две дивы к этой функции, первый div имеет класс и обертывает вокруг всего <li>, поэтому я добавляю li. Второй - это div, который также имеет class, id и data-toggle, The id на самом деле PHP и это синтаксис может вызвать проблемы:

<ul id="index-slider-list"> 
<li> 
<div class='thumbnail removable'> //here is new div 
<div class='remove' id='{$row['id']}' data-toggle='remove'></div> //second div 
<img src='source-here'></li>" 
</div> //ends 
</ul> 

Вот где я собираюсь (добавив эти две строки в function showUploadedItem), но это не работает (очевидно) , я также еще работать, как разместить идентификатор и дата-тумблер:

div = document.createElement("div").className += 'thumbnail removable', 
remove = document.createElement("div").className += 'remove'; 

li.appendChild(div); 
div.appendChild(remove); 

это потому, что я добавление Li в два раза? Какой был бы лучший подход? Любые советы будут очень признательны.

Answer 1

Создайте свои элементы сначала как переменную, затем добавьте id и classname к переменной, как показано ниже.

var myDiv = document.createElement("div"); 
myDiv.id = 'myDiv'; 
myDiv.className = 'thumbnail removeable'; 

var remove = document.createElement("div"); 
remove.id = 'remove'; 
remove.className = 'remove'; 

Кроме того, это нормально, чтобы опубликовать полный сценарий здесь, он будет вставить в IFRAME, если это действительно долго, и поможет более легко отладки, чтобы увидеть, что еще происходит.