Поместить существующий Div в DOM?

Question

У меня есть div, который я создал с помощью DOM / JS. У меня есть другой 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>

Answer 2

Используйте метод appendChild для добавления элемента в другой (чистый JavaScript)

div = document.createElement("div");
div2 = document.createElement("div");
div.appendChild(div2);

Альтернативой является jQuery's append, как упоминалось yahya, которое использует метод appendChild для внутреннего использования.

Answer 3

Учитывая, что вы уже создали свой divElement, вам просто нужно получить div в вашем HTML, используя либо id / class и т.д ... пример:

var htmlDiv = document.getElementById('chat-area')

И тогда вы просто добавите свой созданный div следующим образом:

htmlDiv.append(myCreatedDiv)