Append list DOM tips

1. AppendChild

const comment_text = document.querySelector("textarea");
const post = document.querySelector("button");
const comment_list = document.querySelector(".comment-list>ul");
const profile = document.querySelector(".profile-name>div:first-child");

comment_list.appendChild("butmt")

comment_list is <ul> so I thought "Append Child"worked here, but actually there was error coming out like this.
VM8385:1 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at <anonymous>:1:14What the heck is node? so I just tried different way,

comment_list.appendChild(profile)

then came out result in a good way!<div>john_doe_writer</div>so node means something like an object! not that "OBJECT"but anyway I got this.
But I don't wanna generate every node ( e.g. createElement('li'), then innerHtml( "<p>dfdfd</p>" ))
I want easier way!
for the case, <ul> doesn't have method .innerHtml!

2. Append

const comment_text = document.querySelector("textarea");
const post = document.querySelector("button");
const comment_list = document.querySelector(".comment-list>ul");
const profile = document.querySelector(".profile-name>div:first-child");

post.addEventListener("click", (e) => {
  comment_list.append(
    `<li>
    <div class="comment-text">
      <span>${profile.textContent}</span>
      <span
        >${comment_text.value}
      </span>
    </div>
    <span class="comment-like"
      ><i class="far fa-heart"></i
    ></span>
    </li>`
  );
});

so my second option would be append!
but WTF! result is like this.

Therefore, I got that, .append method it just add as a text like .innerText method.
So I should figure out another better way to solve this problem.

3. InsertAdjacentHTML

const comment_text = document.querySelector("textarea");
const post = document.querySelector("button");
const comment_list = document.querySelector(".comment-list>ul");
const profile = document.querySelector(".profile-name>div:first-child");

post.addEventListener("click", (e) => {
  comment_list.insertAdjacentHTML(
    "beforeend",
    `<li>
    <div class="comment-text">
      <span>${profile.textContent}</span>
      <span
        >${comment_text.value}
      </span>
    </div>
    <span class="comment-like"
      ><i class="far fa-heart"></i
    ></span>
    </li>`
  );
});

Finaaaaaly! this work! I got the result like this.

However, not like other .append .appendChild method,
.insertAdjacentHtml method need one more parameter!
It's about position, I guess, if not...I fucked tho.
Anyway, this is what I googled!
"beforebegin"– insert html immediately before elem,
"afterbegin"– insert html into elem, at the beginning,
"beforeend"– insert html into elem, at the end,
"afterend"– insert html immediately after elem.

4. special! cloneNode

html

    <h1 class="h1-title">
      <span>난 span</span>
    sdfjlasdf
    asdlkfj
    </h1>
    <h1 class="h1-title">
      <span>난 span</span>
    sdfjlasdf
    asdlkfj
    </h1>
    <h1 class="h1-title">
      <span>난 span</span>
    sdfjlasdf
    asdlkfj
    </h1>
    <h1 class="h1-title">
      <span>난 span</span>
    sdfjlasdf
    asdlkfj
    </h1>

js

const p = document.createElement("p");
const h1 = document.querySelectorAll(".h1-title");

h1.forEach((el) => {
  el.appendChild(p);
});

I thought the variable p is added for every h1 node...but result is like this...

WTF!! this is not I wanted! But there is no problem for the code...at least in my thought.
I loop properly for the p element!
But there is another issue I should I should care!
even it is for loop one element can not add whole html because of some reason....
so for the fix this issue you need copy

const p = document.createElement("p");
const h1 = document.querySelectorAll(".h1-title");

h1.forEach((el) => {
  const p_clone = p.cloneNode(true);
  el.appendChild(p_clone);
});

so .cloneNode method make things can copy and add well by loop!
Thanksfully it's a great method when you use for loop!

The link I googled: https://javascript.info/modifying-document