JavaScript Append Items

JavaScript에서 html 태그 요소 추가 및 수정

HTML

    <div class="test"></div>

 

JavaScript

const resultList = document.querySelector(".test");

function appendWinItem() {

  const p = document.createElement("p");

  p.classList.add("win");

  p.textContent = "W";

  p.style.color = "red";

  resultList.appendChild(p);

}

appendWinItem();

 

ON BROWSER

 

 

 

 

 

해설

HTML

    <div class="test">테스트용 텍스트</div>

 

(1) .createElement("추가할 태그명") & .appendChild(추가할 자식요소)

JavaScript

const test = document.querySelector(".test");

const btn = document.createElement("button"); // 괄호 안에 "태그명"을 넣는다.

test.appendChild(btn); // 선택된 요소 안에 자식 요소를 추가한다.

 

ON BROWSER

 

 

(2) .createTextNode("추가할 텍스트")
선택된 요소에 텍스트를 추가한다. 

JavaScript

const test = document.querySelector(".test");

test.appendChild(document.createTextNode(" 「JavaScript로 추가된 텍스트」"));

 

ON BROWSER

 

 

 

(3) .textContent = "이 텍스트로 변경된다"

선택된 요소의 텍스트를 변경한다.

JavaScript

const test = document.querySelector(".test");

test.textContent = "이 텍스트로 변경된다";

 

ON BROWSER