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

这是一个概念验证示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript动态创建新的<div>并用现有的DOM元素填充它？

1 个答案: