하루 하나씩 작성하는 TIL #11
이번 TIL에서는 인스턴스 메소드에 대해 구체적으로 작성해보겠다.
Document: createElement()
document.createElement(tagName);생성할 요소의 태그를 지정하는 문자열 타입의 매개변수를 받고 (필수) 리턴 값으로는 새로 생성된 요소를 리턴한다.
ex)
<!DOCTYPE html>
<html>
<head>
<script>
function fun() {
const btn = document.createElement("button");
btn.innerHTML = "생성된 버튼";
document.body.appendChild(btn);
}
</script>
</head>
<body>
<button onclick="fun()">버튼을 만들려면 클릭하세요</button>
</body>
</html>
document.createElement() 메소드를 사용하여 새로운 버튼 요소를 생성 후, appendChild()를 통해 생성된 요소를 삽입하고 innerHTML을 사용해 버튼에 문자열을 추가하였다.
appendChild
appendChild는 js Node 인터페이스 메소드로 지정된 부모노드에서 사용하면 부모 노드가 가지고 있는 자식 노드 목록의 끝에 매개변수로 전달 받은 노드를 추가한다.
parentNode.appendChild(childNode);childNode는 부모 노드에 추가할 노드를 의미하며 리턴 값으로는 방금 추가된 자식 노드를 리턴한다. childNode가 이미 document에 추가되어 있다면 현재 위치에서 노드를 제거하고 메소드를 실행한 부모 노드의 자식으로 위치를 옮긴다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript appendChild() Method</h2>
<ul id="languages">
<li>Python</li>
<li>Java</li>
<li>Data Structure</li>
</ul>
<button onclick="append()">Append</button>
<script>
function append() {
const node = document.createElement("LI");
const textnode = document.createTextNode("C#");
node.appendChild(textnode);
document.getElementById("languages").appendChild(node);
}
</script>
</body>
</html>
“Append” 버튼을 클릭하면 다음의 이미지와 같이 createElement() 메소드를 사용하여 새로 생성한 노드를 getElementById() 메소드로 찾은 부모 노드에 새로 생성한 노드를 목록에 추가
프론트엔드 개발자를 향해서