js实现select option的添加和移除


<!DOCTYPE html>
<html>
<body>
<select id="ggg" size="15" style="height:200px;">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        </select>
        <select id="hhh"  size="15"  style="height:200px;">
        </select>
        <input type="button" onclick="test()" value="测试" />
        <input type="button" onclick="test1()" value="测试1" />
        <script>
        function test(){
            var sltSrc=document.getElementById("ggg");
            var sltTarget=document.getElementById("hhh");
            while(sltSrc.options.length>0){
                sltTarget.appendChild(sltSrc.options[0]);
            }
        }
            function test1(){
        var sltSrc=document.getElementById("hhh");
            var sltTarget=document.getElementById("ggg");
            while(sltSrc.options.length>0){
                sltTarget.appendChild(sltSrc.options[0]);
            }
        }
</script>

</body>
</html>

为什么代码执行后会删除原来select里的option？

appendChild() 方法向节点添加最后一个子节点。
提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。
您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。
这个是关于这个方法的说明

appendChild() 方法从一个元素向另一个元素中移动元素，所以之前的会没有！

【热门文章】