[기술정리] JS의 append, prepend, before, after

Nov 22, 2024

[기술정리] JS의 append, prepend, before, after

Contents

1. 예시 코드 2. append 3. prepend 4. before 5. after

1. 예시 코드


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>blog</title>
    <style>
        #box {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>

<section id="root">
    <div>칼럼</div>

    <div id="box">
        <div>내용</div>
        <div>내용</div>
        <div>내용</div>
    </div>

    <button onclick="addAppend()">append</button>
    <button onclick="addPrepend()">prepend</button>
    <button onclick="addBefore()">before</button>
    <button onclick="addAfter()">after</button>

</section>

<script>
    // init
    let box = document.querySelector("#box");

    function addAppend() {
        let item = document.createElement("div");
        item.innerHTML = "Appended Item";
        box.append(item);
    }

    function addPrepend() {
        let item = document.createElement("div");
        item.innerHTML = "Prepended Item";
        box.prepend(item);
    }

    function addBefore() {
        let item = document.createElement("div");
        item.innerHTML = "Before Item";
        box.before(item);
    }

    function addAfter() {
        let item = document.createElement("div");
        item.innerHTML = "After Item";
        box.after(item);
    }
</script>

</body>
</html>

2. append

정의: 선택한 요소의 마지막 자식으로 새로운 요소를 추가.

예시 코드:


function addAppend() {
    let item = document.createElement("div");
    item.innerHTML = "Appended Item";
    box.append(item);
}

3. prepend

정의: 선택한 요소의 첫 번째 자식으로 새로운 요소를 추가.

예시 코드:


function addPrepend() {
    let item = document.createElement("div");
    item.innerHTML = "Prepended Item";
    box.prepend(item);
}

4. before

정의: 선택한 요소의 **앞(형제 노드 이전)**에 새로운 요소를 추가.

예시 코드:


function addBefore() {
    let item = document.createElement("div");
    item.innerHTML = "Before Item";
    box.before(item);
}

5. after

정의: 선택한 요소의 **뒤(형제 노드 이후)**에 새로운 요소를 추가.

예시 코드:


function addAfter() {
    let item = document.createElement("div");
    item.innerHTML = "After Item";
    box.after(item);
}

변경 결과

append → Reference Element 뒤에 추가.

prepend → Reference Element 앞에 추가.

before → <p> 이전 형제로 추가.

after → <p> 이후 형제로 추가.

See more posts

[기술정리] JS의 append, prepend, before, after

1. 예시 코드

2. append

3. prepend

4. before

5. after

변경 결과

More articles

[SQL 문제 풀이] Python 개발자 찾기

[기술정리] SPA(Single Page Application)

http 상태코드

AOP