그럼에도 불구하고

👨‍💻

[JavaScript] 요소 다루기 / 요소 추가하기 / 요소 삭제하기 본문

JavaScript/JavaScript basics

[JavaScript] 요소 다루기 / 요소 추가하기 / 요소 삭제하기

zenghyun 2023. 1. 31. 18:05

요소를 다루는 법에 대해 알아보자

 

 

[ 부모 / 자식 / 전 / 후 요소 읽어오기 ]

 

※ 특정 요소와 관련된 요소를 가져오고 싶을 때 사용! 

 

속성 의미 타입
부모노드.children 자식 노드 요소군(HTMLCollection)
부모노드.firstElementChild 첫 번째 자식 노드 요소(Element)
부모노드.lastElementChild 마지막 자식 노드 요소(Element)
노드.nextElementSibling 다음 노드 요소(Element)
노드.previousElementSibling 이전 노드 요소(Element)
자식노드.parentNode 부모 노드 노드(Node)

 

 

소스 코드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
 
<body>
  <div id="parent">
    <div id="child1">자식 요소1</div>
    <div id="child2">자식 요소2</div>
    <div id="child3">자식 요소3</div>
  </div>
 
  <script>
    const parentElement = document.querySelector('#parent');
    console.log(parentElement.children);
    // #자식 요소1, #자식 요소2, #자식 요소3 (HTMLCollection)
 
    const firstElementChild = parentElement.firstElementChild;
    console.log(firstElementChild); // #자식 요소1
    console.log(firstElementChild.nextElementSibling); // #자식 요소2
    console.log(firstElementChild.parentNode); // #부모 요소
  </script>
 
</body>
 
</html>
cs

 

 

[ 부모 요소에 자식 요소 추가하기 ]

 

※ 동적 표시 요소를 추가하고 싶을 때 사용!

※ 모달(modal) 윈도 창을 화면에 추가하고 싶을 때 사용!

 

메소드 의미 반환
부모노드.appendChild(자식노드) 부모 노드에 자식 노드 추가 요소(Element)

 

appendChild()는 부모의 노드 끝에 자식 노드를 추가한다. 페이지를 열어 3초 후. container 요소에 #myBox 요소를 추가하는 샘플을 확인해 보자. 

 

소스 코드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      border: 2px dotted #000;
      padding: 10px;
      margin-top: 20px;
    }
    .container div {
      display: flex;
      border: 2px dotted #000;
      padding: 10px;
      margin: 0 7px;
    }
    #myBox {
      border: 4px solid #d03939;
      padding: 10px;
    }
  </style>
</head>
 
<body>
  <div id="myBox">Box 요소</div>
 
  <div class="container">
    <div>자식 요소1</div>
    <div>자식 요소2</div>
  </div>
 
  <script>
    const container = document.querySelector('.container');
    const myBox = document.querySelector('#myBox');
 
    // 3초후 .container 요소의 끝에 #myBox 요소를 추가
 
    setTimeout(() => {
      container.appendChild(myBox);
    }, 3000);
  </script>
</body>
 
</html>
cs

 

※ 3초후 자동으로 myBox가. container의 자식 요소로 추가된다. 

 

See the Pen Untitled by zenghyun (@zenghyun) on CodePen.

 

 

[ 지정 위치에 요소 추가하기 ]

 

※ 동적 표시 요소를 추가하고 싶을 때 사용!

※ 모달(modal) 윈도우 창을 화면에 추가하고 싶을 때 사용!

 

메소드 의미 반환
부모노드.insertBefore(자식노드, 희망 위치의 노드) 부모 노드 내 노드 추가 요소(Element)

 

insertBefore()는 부모 요소 내 지정 요소의 앞에 노드를 삽입한다. 

 

소스 코드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      border: 2px dotted #000;
      padding: 10px;
      margin-top: 20px;
    }
    .container div {
      display: flex;
      border: 2px dotted #000;
      padding: 10px;
      margin: 0 7px;
    }
    #myBox1 {
      border: 4px solid #d03939;
      padding: 10px;
      margin-bottom: 10px;
    }
    #myBox2 {
      border: 4px solid #d03939;
      padding: 10px;
    }
  </style>
</head>
 
<body>
  <div id="myBox1">#myBox1 요소</div>
  <div id="myBox2">#myBox2 요소</div>
 
  <div class="container">
    <div>자식 요소1</div>
    <div id="box2">자식 요소2</div>
  </div>
 
  <script>
    const container = document.querySelector('.container');
    const myBox1 = document.querySelector('#myBox1');
    const myBox2 = document.querySelector('#myBox2');
    const box2 = document.querySelector('#box2');
 
    // 3초후 .container 제일 앞에 #myBox1 요소를 추가
 
    setTimeout(() => {
      container.insertBefore(myBox1, container.firstElementChild);
    }, 3000);
 
    // 4초후 #box2 요소의 앞에 #myBox2 요소 추가
 
    setTimeout(() => {
      container.insertBefore(myBox2, box2);
    }, 4000);
 
  </script>
</body>
 
</html>
cs

 

※ 3초후 .container 제일 앞에 #myBox1, 4초 후 #box2 요소 앞에 #myBox2 요소 추가된다.

 

See the Pen Untitled by zenghyun (@zenghyun) on CodePen.

 

 

[ 요소 앞 / 뒤에 다른 요소 추가하기 ]

 

※ HTML 요소의 삽입 위치를 상세히 지정하고 싶을 때 사용!

 

메소드 의미 반환
노드1.before(노드2) 노드1 앞에 노드2 추가 없음
노드1.after(노드2) 노드1 뒤에 노드2 추가 없음
부모노드.hasChild(자식노드) 부모 노드에 자식 노드 존재 여부 확인 진릿값

 

before()와 after()는 지정한 요소의 앞/뒤로 노드를 추가한다. #targetBox 요소의 앞뒤로 #myBox1 요소와 #myBox2 요소를 삽입하는 샘플을 확인해 보자

 

소스 코드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      border: 2px dotted #000;
      padding: 10px;
      margin-top: 20px;
    }
    .container div {
      display: flex;
      border: 2px dotted #000;
      padding: 10px;
      margin: 0 7px;
    }
    #myBox1 {
      border: 4px solid #d03939;
      padding: 10px;
      margin-bottom: 10px;
    }
    #myBox2 {
      border: 4px solid #d03939;
      padding: 10px;
    }
  </style>
</head>
 
<body>
  <div id="myBox1">#myBox1 요소</div>
  <div id="myBox2">#myBox2 요소</div>
 
  <div class="container">
    <div id="targetBox">#targetBox 요소</div>
  </div>
 
  <script>
    const myBox1 = document.querySelector('#myBox1');
    const myBox2 = document.querySelector('#myBox2');
    const targetBox = document.querySelector('#targetBox');
 
    // 3초후 #targetBox 요소 앞에 #myBox1 요소 추가
 
    setTimeout(() => {
      targetBox.before(myBox1);
    }, 3000);
 
    // 4초후 #targetBox 요소 뒤에 #myBox2 요소 추가
 
    setTimeout(() => {
      targetBox.after(myBox2);
 
    }, 4000);
 
  </script>
</body>
 
</html>
cs

 

 

※ 3초 후 #targetBox 요소 앞에 #myBox1, 4초 후 #targetBox 요소 뒤에   #myBox2 요소가 추가된다.

 

See the Pen Untitled by zenghyun (@zenghyun) on CodePen.

 

 

 

 

[ HTML 코드 요소 추가하기 ]

 

※ 동적 표시 요소를 추가하고 싶을 때 사용!

※ 모달 윈도 창을 화면에 추가하고 싶을 때  사용!

 

메소드 의미 반환
부모요소.insertAdjacentHTML(삽입위치, 문자열) 문자열을 HTML로 삽입 요소(Element)

 

삽입 위치 의미
'beforebegin' 부모 요소 바로 앞
'afterbegin' 부모 요소 제일 앞
'beforeend' 부모 요소 제일 뒤
'afterend' 부모 요소 바로 뒤

 

insertAdjacentHTML()은 첫 번째 인숫값의 위치에 두 번째 인수의 문자열을 HTML(혹은 XML)로 삽입하며, 삽입 위치의 기존 요소는 삭제하지 않는다. 3초 후. new-box 요소를 추가하는 샘플을 확인해 보자

 

 

소스 코드

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      border: 2px dotted #000;
      padding: 10px;
      margin-top: 20px;
    }
    .container div {
      display: flex;
      border: 2px dotted #000;
      padding: 10px;
      margin: 0 7px;
    }
    .box {
      border: 4px solid #d03939;
      padding: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>
 
<body>
 
  <div class="container">
    <div class="box">자식 요소1</div>
    <div class="box">자식 요소2</div>
  </div>
 
  <script>
    const container = document.querySelector('.container');
 
    // 삽입하는 .new-box 요소
    const newBox = `<div class = "new-box box">.new-box 요소</div>`;
 
 
    setTimeout(() => {
      // .new-box 요소를 .container 요소 제일 앞에 추가
      container.insertAdjacentHTML('afterbegin', newBox);
      // .new-box 요소를 .container 요소 뒤에 추가
      container.insertAdjacentHTML('afterend', newBox);
    }, 3000);
 
 
  </script>
</body>
 
</html>
cs

 

 

 

※ 3초 후. new-box 요소를. container 요소 제일 앞, 뒤에 추가 

 

See the Pen Untitled by zenghyun (@zenghyun) on CodePen.

 

[ 요소를 동적으로 삭제하기 ]

※ 요소를 동적으로 삭제하고 싶을 때 사용! 

 

메소드 의미 반환
부모노드.removeChild(자식노드) 부모 요소에서 자식 요소 제거 제거된 요소(Element)

 

removeChild()는 부모 요소에서 자식 요소를 제거한다. 

저작자표시 비영리

'JavaScript > JavaScript basics' 카테고리의 다른 글

[JavaScript] JSON.stringify / JSON.parse란?  (0) 2023.02.06
[JavaScript] data 어트리뷰트와 dataset 프로퍼티  (0) 2023.02.02
[JavaScript] 변수명 앞에 붙는 달러($)의 의미 (jQuery X)  (2) 2023.01.28
[Javascript] event.preventDefault() 와 event.stopPropagation()  (0) 2023.01.26
[Javascript] Map이란?  (0) 2023.01.26
'JavaScript/JavaScript basics' Related Articles more
Comments