Dom 基于单个功能更改内容_Dom

Dom 基于单个功能更改内容

dom

Dom 基于单个功能更改内容,dom,Dom,Javascript。下面的代码可以工作，但我必须调用函数3次我应该使用replaceChild（）吗这就是我到目前为止所做的： <!DOCTYPE html> <html> <body> <ul id="myList1"><li>1</li><li>2</li><li>3</li><li>4</li></ul> <ul id="

Javascript。下面的代码可以工作，但我必须调用函数3次

我应该使用replaceChild（）吗

这就是我到目前为止所做的：

<!DOCTYPE html>
<html>
<body>

<ul id="myList1"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
<ul id="myList2"><li>a</li><li>b</li><li>c</li><li>d</li></ul>

<p id="demo">Click the button to move an item from one list to another</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{


var tmp = 5;

for(var i = 0; i < tmp; i++)
    {
        var node=document.getElementById("myList2").getElementsByTagName("LI")[i];
        document.getElementById("myList1").appendChild(node);

        var node2=document.getElementById("myList1").getElementsByTagName("LI")[i];
        document.getElementById("myList2").appendChild(node2);
    }

}

</script>

</body>
</html>


1
2
3
4
a
b
c
d
单击按钮将项目从一个列表移动到另一个列表
试试看
函数myFunction（）
{
var-tmp=5；
对于（变量i=0；i

您不需要替换任何内容，只需使用以下内容移动节点即可：

function myFunction() {

    var list1 = document.getElementById("myList1"),
        list2 = document.getElementById("myList2"),
        length1 = list1.children.length,
        length2 = list1.children.length;

    while (list1.children.length) {
        list2.appendChild(list1.children[0]);
    }

    while (list2.children.length > length2) {
         list1.appendChild(list2.children[0]);
    }
}

演示：不要再这样做了。系统不允许您删除已回答的问题是有原因的。