[Javascript] HTML 생성하기

---

 

#1. HTML 생성하기

1. HTML 추가하기

1) appendChild

• appendChild( ) 메소드는 새로운 노드를 해당 노드의 맨 마지막에 추가한다.

<button type="button" id="button">요소추가</button>
<div id="ex"></div>
<div id="ex2"></div>

// 아이디가 button인 요소를 클릭하면
document.getElementById("button").addEventListener("click", e => {
  
  // 아이디가 ex인 요소를 선택
  const ex = document.getElementById("ex");
  
  // 아이디가 ex2인 요소를 선택
  const ex2 = document.getElementById("ex2");
  
  // 아이디가 ex인 요소의 자식노드로 ex2가 추가
  ex.appendChild(ex2);
});

 

※ insertAdjacentHTML

• 부모노드.insertAdjacentHTML.(파라미터, HTML코드) 형식으로 사용한다.
• 첫번째 파라미터에 따라 자식요소가 추가되는 위치가 달라진다.
  • beforebegin : 요소의 시작태그 직전에 추가된다. 엄밀히 말하면 지정된 요소 외부에 추가되므로 추가라고 할 수는 없다.
  • beforeend : 요소의 종료태그 직전에 추가된다.
  • afterbegin : 요소의 시작태그 직후에 추가된다. (내부에 추가됨)
  • afterend : 요소의 종료태그 직후에 추가된다.
• 생성하고자 하는 HTML의 코드 자체를 하나하나 적용해야 한다. (이벤트 핸들러 사용)

[예시]

list.insertAdjacentHTML("beforebegin", '<li class="item beforebegin" onclick="this.remove()">' + comment.value + '</li>');

• 가급적 appendChild를 사용하는것이 좋다.

 

2) insertBefore

• insertBefore( ) 메소드는 새로운 노드를 특정 자식 노드 바로 앞에 추가한다.
• insertAfter 는 없다.

부모노드.insertBefore(삽입할 노드, 기준점 노드);

// 삽입할 노드 : 자식 노드 리스트에 새롭게 추가할 자식 노드를 지정
// 기준점 노드 : 새로운 노드를 삽입할 때 기준. 이 노드 바로 앞에 새로운 노드가 추가된다.

※ 기준점이 null인 경우 appendChild와 동일하게 동작한다.

<button type="button" id="button">요소추가</button>
<div id="ex">
  <div id="ex2"></div>
</div>
<div id="ex3"></div>

// 아이디가 button인 요소를 클릭하면
document.getElementById("button").addEventListener("click", e => {

  // 아이디가 ex인 요소를 선택
  const ex = document.getElementById("ex");
  
  // 아이디가 ex2인 요소를 선택
  const ex2 = document.getElementById("ex2");
  
  // 아이디가 ex3인 요소를 선택
  const ex3 = document.getElementById("ex3");
  
  // 아이디가 ex2인 요소 기준으로 앞에 ex3 요소가 추가된다.
  ex.insertBefore(ex3, ex2);
});

 

3) insertData

• insertData( ) 메소드는 텍스트 노드의 텍스트 데이터에 새로운 텍스트를 추가한다.

텍스트노드.insertData(오프셋, 새로운 데이터);

// 오프셋 : 오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 위치부터 추가할지를 전달한다.
// 새로운 데이터 : 새로이 삽입할 텍스트 데이터를 전달한다.

 

2. HTML 생성하기

1) createElement

• createElement( ) 메소드를 사용하여 새로운 요소 노드를 만들 수 있다.

<button type="button" id="button">요소추가</button>
<div id="ex"></div>

// 기준이 되는 요소 아이디 선택
const ex = document.getElementById("ex");

// 아이디가 button인 요소를 클릭하면
document.getElementById("button").addEventListener("click", e => {

  // h1 태그를 새로 생성
  const example = document.createElement("h1");
  
  // 새로 생성된 태그에 텍스트 삽입
  example.innerHTML = "h1 태그 생성";
  
  // appenChild를 통해 새로운 요소를 기준이 되는 요소의 자식으로 추가
  ex.appendChild(example);
});

 

2) createAttribute

• createAttreibute( ) 메소드를 사용하여 새로운 속성 노드를 만들 수 있다.
• 만약 같은 이름의 속성 노드가 이미 존재하면, 기존의 속성 노드는 새로운 속성 노드로 대체 된다.
• 이미 존재하는 요소 노드에 속성 노드를 생성하고자 할 때에는 setAttribute( ) 메소드를 사용할 수 있다.

<button type="button" id="button">요소추가</button>
<div id="ex"></div>

// 기준이 되는 요소 아이디 선택
const ex = document.getElementById("ex");

// 아이디가 button인 요소를 클릭하면
document.getElementById("button").addEventListener("click", e => {

  // 새로운 style 속성 노드를 생성
  const example = document.createAttribute("style");
  
  // 속성 값을 지정
  example.value = "color:cyan";
  
  // 해당 요소의 속성 노드로 추가
  ex.setAttributeNode(example);
});

 

3) createTextNode

• createTextNode( ) 메소드를 사용하여 새로운 텍스트 노드를 만들 수 있습니다.

<button type="button" id="button">요소추가</button>
<div id="ex"></div>

// 기준이 되는 요소 아이디 선택
const ex = document.getElementById("ex");

// 아이디가 button인 요소를 클릭하면
document.getElementById("button").addEventListener("click", e => {

  // 새로운 텍스트 노드를 생성한다.
  const example = document.createTextNode("새로운 텍스트");
  
  // 해당 요소의 자식 노드로 추가한다.
  ex.appendChild(example);
});

 

3. HTML 제거하기

1) removeChild

• removeChild( ) 메소드는 자식 노드 리스트에서 특정 자식 노드를 제거한다.
• 해당 노드가 제거 되면 그 노드의 자식 노드들도 같이 제거된다.

<button type="button" id="button">요소추가</button>
<div id="ex">
  <ul id="ex2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

// 아이디가 button인 요소를 클릭하면
document.getElementById("button").addEventListener("click", e => {

  // 기준이 되는 요소 아이디 선택
  const ex = document.getElementById("ex");
  
  // 제거할 요소의 아이디 선택
  const example = document.getElementById("ex2");
  
  // 지정된 요소 제거 -> 하위 요소들도 같이 제거된다.
  ex.removeChild(example);
});

 

2) removeAttribute

• removeAttribute( ) 메소드는 속성의 이름을 이용하여 특정 속성 노드를 제거한다.
• 노드.removeAttribute("제거할속성"); 형식으로 사용한다.
  • 파라미터 값으로 제거할 속성의 이름을 지정하면 된다. (문자열로 지정)

<button type="button" id="button">요소추가</button>
<div id="ex" style="color:red;">Example</div>

// 아이디가 button인 요소를 클릭하면
document.getElementById("button").addEventListener("click", e => {

  // 기준이 되는 요소 아이디 선택
  const ex = document.getElementById("ex");
  
  // 선택한 요소의 style 속성 값을 제거한다. -> "id" 를 넣으면 id속성 제거
  ex.removeAttribute("style");
});

 

4. HTML 복제하기

cloneNode

• cloneNode( ) 메소드를 사용하여 기존에 존재하는 노드와 똑같은 새로운 노드를 생성한다.
• 복제할노드.cloneNode(자식노드복제여부); 형식으로 사용한다.
  • 자식 노드 복제 여부 : 전달된 값이 true면 복제되는 노드의 모든 속성 노드와 자식 노드도 같이 복제하고. false인 경우 속성 노드만 복제하고 자식 노드는 복제하지 않는다.

<button type="button" id="button">요소추가</button>
<div id="ex">
  <ul id="ex2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

// 아이디가 button인 요소를 클릭하면
document.getElementById("button").addEventListener("click", e => {

  // 기준이 되는 요소 아이디 선택
  const ex = document.getElementById("ex");
  
  // 복제할 요소의 아이디 선택
  const ex2 = document.getElementById("ex2");
  
  // appendChild를 사용해 복제할 요소를 자식 요소로 추가
  ex.appendChild(ex2.cloneNode(true));
});