創建新的Javascript <div> 動態地填充現有的DOM元素？

Question

我正在學習javascript並在DOM中添加/刪除元素，但我對看起來應該很簡單的東西感到困惑。 我想創建一個新的div包裝器，其ID圍繞主體中的所有元素。 如果可能的話，我更喜歡使用Vanilla Javascript而不是jQuery。

HTML：

<h1>Javascript Testing Header</h1>
<p>This is some text inside of my javascript testing page.</p>
<p>This is another simple paragraph.</p>
<h2>I like foods like:</h2>
<ul>
    <li>Apples</li>
    <li>Chocolate</li>
    <li>Thin Mints</li>
    <li>Tiger Trees</li>
    <li>Feet Mangroves</li>
</ul>

Javascript：

// puts all the elements in <body> into it's own variable
var header1 = document.querySelector('h1');
var para = document.querySelectorAll('p');
var header2 = document.querySelector('h2');
var list = document.querySelector('ul');

// creates the new dynamic div 
var newDivWrapper = document.createElement('div');
// gives newly created dynamic div id=container
newDivWrapper.id = 'container';

var bodyTag = document.querySelector('body');

// appends the newDivWrapper to the end of the DOM, just above </body>
var newDivWrapper = bodyTag.appendChild(newDivWrapper);

function replaceContent() {
    document.newDivWrapper.innerHTML = header1 + para + header2 + list;
}
replaceContent();

上面的方法不起作用，它將創建新的div並將其添加到DOM的末尾。 但是，我不確定是否應該在將舊元素保存到var之后刪除DOM中的舊元素，或者是否可以移動它們的位置。 另外，我非常確定我不能使用innerHTML將文本以外的任何內容寫到元素中。

Answer 1

您的代碼幾乎是正確的， replaceContent()方法除外：

您必須使用newDivWrapper.appendChild(...)而不是編寫innerHTML，因為.innerHTML需要字符串，但是header ， header2和list是HTML節點，而para是NodeList。
對於para ，您將必須遍歷節點列表以將每個節點分別追加到newDivWrapper
您無需重新分配newDivWrapper 。 相反，只需在調用replaceContent()之后移動將其附加到正文的行即可

考慮到以上注釋，我們可以將代碼的最后部分重寫為：

function replaceContent() {
    // #1: Use appendChild to append header1 to your new element
    newDivWrapper.appendChild(header1);

    // #2: para is a NodeList, so you have to loop through it
    [].slice.call(para).forEach(function(node) {
      newDivWrapper.appendChild(node);
    });

    // #1: Use appendChild to append header2 and list to your new element
    newDivWrapper.appendChild(header2);
    newDivWrapper.appendChild(list);
}
replaceContent();

// #3: Append your new element after everything is sorted out
bodyTag.appendChild(newDivWrapper);

這是一個概念證明示例：

 // puts all the elements in <body> into it's own variable var header1 = document.querySelector('h1'); var para = document.querySelectorAll('p'); var header2 = document.querySelector('h2'); var list = document.querySelector('ul'); // creates the new dynamic div var newDivWrapper = document.createElement('div'); // gives newly created dynamic div id=container newDivWrapper.id = 'container'; var bodyTag = document.querySelector('body'); function replaceContent() { newDivWrapper.appendChild(header1); // para is a NodeList, so you have to loop through it [].slice.call(para).forEach(function(node) { newDivWrapper.appendChild(node); }); newDivWrapper.appendChild(header2); newDivWrapper.appendChild(list); } replaceContent(); bodyTag.appendChild(newDivWrapper);

 <h1>Javascript Testing Header</h1> <p>This is some text inside of my javascript testing page.</p> <p>This is another simple paragraph.</p> <h2>I like foods like:</h2> <ul> <li>Apples</li> <li>Chocolate</li> <li>Thin Mints</li> <li>Tiger Trees</li> <li>Feet Mangroves</li> </ul>

創建新的Javascript <div> 動態地填充現有的DOM元素？

問題描述

1 個解決方案

解決方案1
0 2018-03-11 21:23:36

創建新的Javascript <div> 動態地填充現有的DOM元素？

問題描述

1 個解決方案

解決方案1 0 2018-03-11 21:23:36

解決方案1
0 2018-03-11 21:23:36