[기술정리] 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> 이후 형제로 추가.

Contents

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

<!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>