时间戳

首页 > 解决方案 > 创建一个新元素 div 并使用 JavaScript 将其包裹在现有元素周围

javascript - 创建一个新元素 div 并使用 JavaScript 将其包裹在现有元素周围

问题描述

我知道如何创建一个新的 div 或任何其他 HTML 元素，并使用纯 JavaScript 将其添加为子元素。

我可以创建一个新元素并将我现有的元素添加到其中吗？

例如：

我想将下面的当前代码放在一个全新的 div 中。

// Current elements on page
<div>
  <img />
  <img />
</div>
<div>
  <p>Hello world</p>
</div>

我想要的是：

// What I want
<div class="my-new-div">
 <div>
  <img />
  <img />
 </div>
 <div>
  <p>Hello world</p>
 </div>
</div>

我知道这在 HTML 中很容易做到。在这种情况下，我必须使用 JavaScript 来更改网页。在这种情况下，我必须添加一个父 div 以避免更改样式。

标签： javascript

解决方案

您可以简单地获取现有节点，创建一个新节点，将其插入现有节点之前，最后将现有节点作为子节点附加到新节点。如果节点已经包含在文档的某个位置，浏览器会在执行“追加”操作时移动节点。

const myDiv = document.getElementById("myDiv");
const myNewDiv = document.createElement("div");
myNewDiv.style.border = "solid 1px";

document.body.insertBefore(myNewDiv, myDiv);
myNewDiv.appendChild(myDiv);
<div id="myDiv">
  <p>Hello</p>
  <p>Paragraph</p>
</div>

推荐阅读