프로그래밍/JavaScript

자바스크립트 - DOM 객체 생성, 삽입, 삭제

맹이맹이 2020. 6. 22. 01:56
반응형

자바스크립트를 활용해서 HTML 문서의 로드가 완료된 document에 새로운 HTML 태그를 추가할 수 있다.

​

DOM 객체 동적 생성

- 키워드 : createElement()

- document.createElement("태그이름")을 이용해서 HTML 태그의 DOM 객체를 생성할 수 있다.

- DOM 객체를 생성했으면 innerHTML 프로퍼티를 이용해서 생성한 객체 태그에 HTML 텍스트를 삽입한다.

- 또한, CSS3 스타일 시트도 설정할 수 있다.

let newDiv = document.createElement("div");
newDiv.innerHTML = "새롭게 생성했다!";
newDiv.setAttribute("id", "Ndiv");
newDiv.style.backgroundColor = "blue";

DOM 트리에 삽입

- 앞에서 만든 DOM 객체를 DOM 트리에 삽입하는 과정이다.

부모.appendChild(DOM객체); // DOM 객체를 부모의 마지막 자식으로 삽입
부모.insertBefore(DOM객체 [, 기준자식]); // DOM 객체를 부모의 자식 객체 중 기준 자식 앞 삽입
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>안녕하세요</h2>
        <hr>
    </div>
    <script>
        let newDiv = document.createElement("div");
        newDiv.innerHTML = "새롭게 생성했다!";
        newDiv.setAttribute("id", "Ndiv");
        newDiv.style.backgroundColor = "blue";
        let par = document.getElementsByTagName("h2")[0];
        par.appendChild(newDiv);
    </script>
</body>
</html>

이렇게 생성 후 삽입된 걸 알 수 있다.

​

DOM 객체 삭제

- 키워드 : removeChild()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>안녕하세요</h2>
        <hr>
    </div>
    <script>
        let newDiv = document.createElement("div");
        newDiv.innerHTML = "새롭게 생성했다!";
        newDiv.setAttribute("id", "Ndiv");
        newDiv.style.backgroundColor = "blue";
        let par = document.getElementsByTagName("h2")[0];
        par.appendChild(newDiv);
        let chi = document.getElementById("Ndiv");
        let chio = chi.parentElement;
        chio.removeChild(chi);
    </script>
</body>
</html>

추가되었던 객체가 사라진 것을 알 수 있다.

cho 변수에 부모 id가 Ndiv인 것의 정보를 담고 chio 변수에 cho의 부모 객체를 담아준다.

그리고 removeChild를 이용해서 삭제를 했다!

​

반응형