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

【问题标题】：Javascript to create new <div> dynamically and fill it with the existing DOM elements?Javascript 动态创建新的 <div> 并用现有的 DOM 元素填充它？
【发布时间】：2018-08-19 21:05:49
【问题描述】：

我正在学习 javascript 并在 DOM 中添加/删除元素，但我对看起来应该很简单的事情感到困惑。我想在正文中的所有元素周围创建一个带有 ID 的新 div 包装器。如果可能的话，我更喜欢使用 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 的末尾。但是，我不确定是否应该在将 DOM 中的旧元素保存到 var 后删除它们，或者它们的位置是否可以移动。另外，我很确定我不能使用 innerHTML 将文本以外的任何内容写入元素。

【问题讨论】：

标签： javascript html dom dynamic

【解决方案1】：

您的代码几乎是正确的，除了 replaceContent() 方法：

您必须使用newDivWrapper.appendChild(...) 而不是编写innerHTML，因为.innerHTML 需要一个字符串，但header、header2 和list 是HTML 节点，而para 是一个NodeList。
对于para，您必须遍历节点列表以将每个节点单独附加到newDivWrapper
您不需要重新分配newDivWrapper。相反，只需在调用 replaceContent() 后移动将其附加到正文的行

考虑到上面的 cmets，我们可以将代码的最后一部分重写为：

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>

【讨论】：

感谢您的解释，它运行良好。出于好奇，我尝试通过调用 .class 而不是所有 p 标签来通过 [].slice.call(para).forEach(p) {} 传递多个 HTML 元素。我为所有 p 标签和单个列表项提供了相同的类。它将列表项从 ul 中取出并放在所有 p 标签的末尾。既然我们通过了forEach(p)，为什么不忽略列表项呢？
@Lavert forEach(function(p) {...})，p 不是选择器，只是指节点列表中的单个节点。在遍历数组时，将其视为数组中的数组项的引用/指针/访问器。阅读有关如何使用 forEach 的文档：) 我已更新我的答案以重命名 p 变量以避免混淆。