[JavaScript] 태그 넣기, insertAdjacentHTML

    <ul id="list">

    </ul>


    <script>
        // id가 list인 ul을 가져온다
        const list = document.querySelector("#list");
        // ul 안에 li를 넣는다
        list.innerHTML = "<li>바나나</li>";
    </script>

바나나 밑에 사과를 추가하고싶다.

    <ul id="list">
    </ul>
    <script>
        // id가 list인 ul을 가져온다
        const list = document.querySelector("#list");
        // ul 안에 li를 넣는다
        list.innerHTML = "<li>바나나</li>";
        list.innerHTML = "<li>사과</li>";
    </script>

이렇게 하면 덮어씌워진다.

 

1. 문자열로 태그 안에 자식 태그 넣는 방법

    <ul id="list">
    </ul>
    <script>
        // id가 list인 ul을 가져온다
        const list = document.querySelector("#list");
        // ul 안에 li를 넣는다
        list.innerHTML = `<li>바나나</li><li>사과</li>`;
    </script>

2. 자바스크립트에서 태그를 만들어서 넣는 방법

 - appendChild

        const li1 = document.createElement("li");
        li1.innerText = "바나나";
        const li2 = document.createElement("li");
        li2.innerText = "사과";

        list.appendChild(li1);
        list.appendChild(li2);

 

 

 

* list에 반복문과 createElement, appendChild를 이용해서 li 추가

        const 과일리스트 = ["멜론", "수박", "딸기"];
        
        for (let i = 0; i < 과일리스트.length; i++) {
            const tempLi = document.createElement("li");
            tempLi.innerText = 과일리스트[i];
            list.appendChild(tempLi);
        }

        -------
        
        // forEach
        과일리스트.forEach((value) => {
            const tempLi = document.createElement("li");
            tempLi.innerText = value; 
            list.appendChild(tempLi);  
        });

 

 

---

insertAdjacentHTML

 - 문자열로 태그를 만들어서 추가시킬 수 있다 

 - 태그를 넣는 위치도 고를 수 있다

        list.insertAdjacentHTML(
            "beforeend"
        );

4개의 위치를 고를 수 있다

위치

 

 

        list.insertAdjacentHTML(
            "afterbegin",
            `<li>무화과</li>`
        );

 

        list.insertAdjacentHTML(
            "beforebegin",
            `<li>무화과</li>`
        );

 

* insertAdjacentHTML, foreEach 이용해서 추가

 - const 과일리스트1 = ["망고", "귤", "한라봉"];

        const 과일리스트1 = ["망고", "귤", "한라봉"];

        과일리스트1.forEach((value)=>{
            list.insertAdjacentHTML(
                "beforeend",
                `<li>${value}</li>`
            )
        });