HTML, CSS, Javascript

[Javascript] 요소를 붙이는 다양한 방법

kimyongjun0129 2025. 4. 13. 00:03

append(요소, 요소..) :

마지막 자식으로 요소(노드)가 추가된다.

 

  • 여러 노드나 텍스트도 한 번에 추가할 수 있다.
  • appendChild보다 유연하다.
더보기 
<body>
  <div id="parent"></div>
</body>
<script>
  const parent = document.getElementById("parent");
  const p1 = document.createElement("p");
  p1.textContent = "첫 번째 문장";

  const p2 = document.createElement("p");
  p2.textContent = "두 번째 문장";

  const p3 = document.createElement("p");
  p3.textContent = "두 번째 문장";

  parent.append(p1, p2, p3);
  parent.append("텍스트 추가");
</script>

 

 

콘솔값

 

 

 

 

 

appendChild(요소) :

부모 요소(노드)의 마지막 자식으로 새 요소(노드)를 추가한다.

  • 텍스트 추가하면 오류가 발생한다.
  • append()와 달리 하나의 요소만 추가할 수 있다.
  • 추가된 노드를 반환한다.
더보기 
<body>
  <div id="parent">
    <div id="child"></div>
  </div>
</body>
<script>
  const parent = document.getElementById("parent");
  const div = document.createElement("div");

  console.log(parent.appendChild(div));
</script>

 

결과값

 

콘솔값

다른 메서드들은 콘솔 찍을 시, undefined가 뜬다.

 

 

 

 

 

prepend(요소, 요소..) :

첫 번째 자식으로 요소(노드)를 추가한다.

  • 여러 노드나 텍스트도 한 번에 추가할 수 있다.
더보기 
<body>
  <div id="parent"></div>
</body>
<script>
  const parent = document.getElementById("parent");
  const p1 = document.createElement("p");
  p1.textContent = "첫 번째 문장";

  const p2 = document.createElement("p");
  p2.textContent = "두 번째 문장";

  const p3 = document.createElement("p");
  p3.textContent = "두 번째 문장";

  parent.prepend(p1, p2, p3);
  parent.prepend("텍스트 추가");
</script>

 

콘솔값

 

 

 

 

 

insertBefore(새 노드, 참조 노드) :

기존 요소 앞에 새로운 요소를 삽입한다.

더보기 
<body>
  <div id="parent">
    <div id="child"></div>
  </div>
</body>
<script>
  const parent = document.getElementById("parent");
  const child = document.getElementById("child");
  const p1 = document.createElement("p");
  p1.textContent = "첫 번째 문장";

  parent.insertBefore(p1, child);
</script>

insertBefore(새로 만들어진 요소, 참조 요소)

 

콘솔값

 

 

 

 

 

insertAdjacentElement(위치, 요소) :

위치를 세부적으로 지정해서 요소를 삽입할 수 있다.

더보기 
<body>
  <div id="parent">
    <div id="child"></div>
  </div>
</body>
<script>
  const parent = document.getElementById("parent");
  const div = document.createElement("div");

  //parent.insertAdjacentElement("beforebegin", div);
  //parent.insertAdjacentElement("afterbegin", div);
  //parent.insertAdjacentElement("beforeend", div);
  //parent.insertAdjacentElement("afterend", div);
</script>

beforebegin : 대상 요소 바로 앞

afterbegin : 대상 요소의 첫 자식으로

beforeend : 대상 요소의 마지막 자식으로

afterend : 대상 요소 바로 뒤

 

beforebegin

 

afterbegin

 

beforeend

 

afterend