javascript - 将现有的 Div 放入 DOM div？

Question

我有一个用 DOM/JS 创建的 div。我有另一个 div，我有一些 html，我想将其放在 DOM div 中。我是 JS 的新手，因此我们将不胜感激。

//The DOM div

div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";  
div.style.top = "0px";
div.style.width = "240px";
div.style.height = "auto";
div.style.background = "red";
div.style.padding = "15px 0px 0px 0px";
div.style.color = "white";
div.id = "chat";

<!--The existing div code-->

<div id="page-wrap">

  <h2>Chat</h2>
  <p id="name-area"></p>
  <div id="chat-wrap"><div id="chat-area"></div></div>
  <form id="send-message-area">
      <p>Your message: </p>
      <textarea id="sendie" maxlength = '100' ></textarea>
  </form>

</div>

Answer 1

您可以像下面这样使用 innerHTML 和 outerHTML 属性:

const div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";  
div.style.top = "0px";
div.style.width = "240px";
div.style.height = "auto";
div.style.background = "red";
div.style.padding = "15px 0px 0px 0px";
div.style.color = "white";
div.id = "chat";

//
div.innerHTML += document.getElementById('page-wrap').outerHTML;
document.getElementById('page-wrap').remove(); // remove the previous one;
document.body.append(div);

<div id="page-wrap">

    <h2>Chat</h2>

    <p id="name-area"></p>

    <div id="chat-wrap"><div id="chat-area"></div></div>

    <form id="send-message-area">
        <p>Your message: </p>
        <textarea id="sendie" maxlength = '100' ></textarea>
    </form>

</div>