javascript для вставки html в веб-страницу

Question

Я использую Javascript для вставки двух элементов li в веб-страницу. Второй li вставляется внутри первого.

Вопрос в том, могу ли я создать структуру данных, которые имеют оба элемента li на одном уровне. Я мог бы настроить код, чтобы сделать две вставки, но мне любопытно, могу ли я делать каждую структуру данных.

Вот мой код для вставки элементов Li:

// Buid data structure 
    // Create first <li> note 
    var firstLi = document.createElement("lI"); 
    var node = document.createTextNode(" "); 
    firstLi.appendChild(node); 

    // Create second <li> node 
    var secondLi = document.createElement("LI"); 

    // Append pagination 
    // End of with three paginations on page with multipage document 
    secondLi.appendChild(clone);      

    // combine li's 
    firstLi.appendChild(secondLi); 

    // Append the cloned <span> element to follow [pulldown] 
    document.getElementsByClassName("apple-social-actions-toolbar")[0].appendChild(firstLi); 

Чуть выше подсвеченные линии вы увидите вложенную Ли. Я хочу, чтобы li был на том же уровне, что и закрывающая ul.

Answer 1

В вашем примере ваша логика для «комбинирования li» является ошибочной. Это добавление одного ребенка к другому, а не двух детей на одном уровне.

// combine li's 
    firstLi.appendChild(secondLi); 

    // Append the cloned <span> element to follow [pulldown] 
    document.getElementsByClassName("apple-social-actions-toolbar")[0].appendChild(firstLi); 

должны стать:

// combine li's 
    // remove this: firstLi.appendChild(secondLi); 

    // Append the cloned <span> element to follow [pulldown] 
    document.getElementsByClassName("apple-social-actions-toolbar")[0].appendChild(firstLi).appendChild(secondLi); 

Answer 2

Вот что я закончил с:

// Buid data structure 
    // Create first <li> note 
    var firstLi = document.createElement("lI"); 
    // \u00A0 is &nbsp; 
    var node = document.createTextNode(" \u00A0\u00A0\u00A0\u00A0 "); 
    firstLi.appendChild(node); 

    document.getElementsByClassName("apple-social-actions-toolbar")[0].appendChild(firstLi) 

    // Create second <li> node 
    var secondLi = document.createElement("LI"); 

    // Append pagination 
    // End of with three paginations on page with multipage document 
    secondLi.appendChild(clone);      


    // Append the cloned <span> element to follow [pulldown] 
    document.getElementsByClassName("apple-social-actions-toolbar")[0].appendChild(secondLi);