ウェブページにhtmlを挿入するjavascript

Question

私は2つのli要素をウェブページに挿入するためにJavaScriptを使用しています。 2番目の李は最初の仲間に入れられます。

問題は、両方のli要素を同じレベルに持つデータ構造を作成することです。私は2つの挿入をするコードを調整することができますが、私はすべてのデータ構造で行うことができれば興味があります。ここで

は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); 

は、ネストされた李が表示されますラインを強調しました。私は封筒のulと同じレベルに李を持っていたい。

Answer 1

あなたの例では、 "liの組み合わせ"のロジックに欠陥があります。それは、同じレベルの2人の子供ではなく、もう1人を子供として追加しています。

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

私がなってしまったものです：兄弟すべきULおよびLiのために次のようにする必要があり、私が正しくあなたの質問を理解していた場合

// 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);