HTML DOM 엘리먼트 추가와 제거

자바스크립트에서는 HTML 엘리먼트를 동적으로 추가하거나 제거할 수 있다.

새 HTML 엘리먼트 추가

새 HTML 엘리먼트를 추가하려면 createElement()나 createTextNode() 메서드를 이용해 HTML 엘리먼트를 생성한 다음 그것을 기존 엘리먼트에 덧붙이면 된다. 다음 예제를 보자.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Elements</title>
</head>
<body>
<div>
    <ul id='ul-1'>
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
    </ul>
</div>

<script type="text/javascript">

    var list4 = document.createElement("li");
    var node = document.createTextNode("list4");
    list4.appendChild(node);

    var element = document.getElementById("ul-1");
    element.appendChild(list4);

</script>

</body>
</html>

기존 HTML 엘리먼트 제거

기존 HTML 엘리먼트를 제거하려면 해당 엘리먼트 부모의 removeChild() 메서드를 이용하면 된다. 다음 예제를 보자.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Elements</title>
</head>
<body>
<div>
    <ul id='ul-1'>
        <li>list1</li>
        <li>list2</li>
        <li>list3</li>
    </ul>
</div>

<script type="text/javascript">

    var parent = document.getElementById("ul-1");
    var li3 = document.getElementById("li-3");

    parent.removeChild(li3);

</script>

</body>
</html>

관련 수업

← 이전홈다음 →