javascript

javascript_(Dom_노드 생성,삽입,이동)_22.05.03(day10)

양빵빵 2022. 5. 3. 16:14

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <ul id="fruits">
        <li>사과</li>
        <li>바나나</li>
        <li>포도</li>
    </ul>

    <script>
        const $fruits = document.getElementById('fruits');

        const $newLi = document.createElement('li');
        $newLi.textContent = '망고';

        // $fruits.insertBefore($newLi, $fruits.children[1]);
        // $fruits.insertBefore($newLi, $fruits.lastElementChild);
        // $fruits.insertBefore($newLi, document.querySelector('#fruits > li:nth-child(2)'));

        // $fruits.insertBefore($newLi, $fruits.firstElementChild.nextElementSibling);
        $fruits.insertBefore($newLi, $fruits.firstElementChild);

    </script>

</body>
</html>

 

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="fruits">
        <li class="apple">사과</li>
        <li class="banana">바나나</li>
        <li class="grape">포도</li>
        <li class="mango">망고</li>
    </ul>

    <script>
        /*
        //배열 디스트럭쳐링(구조분해 할당 ES6+)
        const foods = ['라면','오렌지','치킨'];
       
        const [ramen, orange,chicken, pizza] = foods;

     
        const ramen = foods[0];
        const orange = foods[1];
        const chicken = foods[2];
        */

        const $fruits = document.getElementById('fruits');
        const [$apple, $banana, $grape, $mango] = $fruits.children;

        //노드이동
        $fruits.insertBefore($banana,$mango);
        // new노드 위치에 작성된 노드가 화면에 이미 그려져 있으면 이동, 위에 코드에서는 망고 앞으로 바나나 이동

        $fruits.appendChild($grape);
        // appendChild에 이미 그려져 있는 노드를 쓰면 작성된 노드를 맨 끝으로 이동 시킴.

        console.log($fruits.children);
        // 위치를 이동하면서 다른 인덱스 위치를 바꿀수 있음.

       
    </script>
</body>
</html>