appendChild()方法

appendChild()方法是向节点添加最后一个子节点，也可以使用此方法从一个元素向另一个元素移动元素。appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。例二：左右select中元素可以左右移动。例一：向ul中添加li项。

柚子小怪兽

747人浏览 · 2023-01-04 10:55:01

柚子小怪兽 · 2023-01-04 10:55:01 发布

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点

例一：向ul中添加li项

代码段：

<body>
    <ul id="myList">
        <li>Coffee</li>
        <li>Tea</li>
    </ul>
    <p id="demo">点击按钮将项目添加到列表中</p>
    <button onclick="myFunction()">点我</button>
    <p>注意：首先创建一个节点，然后创建一个文本节点</br>
        然后将文本节点添加到LI节点上，最后将节点添加到列表中</p>
        <script>

            function myFunction(){
                 var myList = document.getElementById('myList');
                 var node = document.createElement('li');
                 var textNode = document.createTextNode('Water');
         
                 node.appendChild(textNode);
                 myList.appendChild(node);
             }
         </script>
</body>

效果展示：

例二：左右select中元素可以左右移动

代码段：

<body>
    
        <select id="select1" multiple="multiple" size="10">
            <option>左1</option>
            <option>左2</option>
            <option>左3</option>
            <option>左4</option>
            <option>左5</option>
        </select>
        <button class="" onclick="toRight()">点我>></button>
        <button class="" onclick="toLeft()">点我<<</button>
        <select id="select2" multiple="multiple" size="10">
            <!-- multiple当该属性为 true 时，可选择多个选项 -->
            <!-- size当规定下拉列表中可见选项的数目-->
            <option>右1</option>
            <option>右2</option>
            <option>右3</option>
            <option>右4</option>
            <option>右5</option>
        </select>
    <script type="text/javascript">
        var select1 = document.getElementById('select1');
        var select2 = document.getElementById('select2');
        function toRight(){
            var childes = select1.childNodes;
            // childNodes 属性返回包含被选节点的子节点的 NodeList
            for(let i = 0; i <childes.length; i++ ){
                if(childes[i].selected){
                    select2.appendChild(childes[i]);
                }
            }
        };
        function toLeft(){
            var childes = select2.childNodes;
            // childNodes 属性返回包含被选节点的子节点的 NodeList
            for(let i = 0; i <childes.length; i++ ){
                if(childes[i].selected){
                    select1.appendChild(childes[i]);
                }
            }
        }
    </script>
    
</body>