如何使用纯JavaScript将元素从DOM中的一个位置移动到另一个位置?

nfeuvbwi  于 2023-04-19  发布在  Java
关注(0)|答案(5)|浏览(366)

我知道如何在jQUery中做到这一点(未经测试,但应该工作):

$('#foo').html().appendTo('#bar');
$('#foo').remove();

但是如何在普通JS中做到这一点呢?

ssgvzors

ssgvzors1#

field = document.getElementById('e');
document.getElementById('x').innerHTML = field.parentNode.innerHTML;
field.parentNode.removeChild(field);

这是一个解决方案,你也可以搜索clonenode

smdnsysy

smdnsysy2#

你的jQuery代码可以在纯javascript中这样做:

var foo = document.getElementById("foo"),
    bar = document.getElementById("bar");
bar.innerHTML = foo.innerHTML;
foo.parentNode.removeChild(foo);

但这只是将foo中的html代码作为字符串复制到bar,然后从DOM中删除foo
也可以移动节点,如下所示:

var foo = document.getElementById("foo"),
    bar = document.getElementById("bar");
bar.innerHTML = "";
for (var node in foo.childNodes) {
    bar.appendChild(node);
}
foo.parentNode.removeChild(foo);

这将把foo的实际子节点移动到bar,然后删除现在为空的foo

z6psavjg

z6psavjg3#

最简单的,有这样一种可能性:

var foo = document.getElementById('foo');
document.getElementById('bar').innerHTML = foo.innerHTML;
foo.parentNode.removeChild(foo);

JS Fiddle demo
然后,使用一个函数来最小化重复:

function moveTo(source,target){
    if (!source || !target) {
        return false;
    }
    else {
        var children = source.childNodes;
        while (children.length){
            target.appendChild(children[0]);
        }
        source.parentNode.removeChild(source);
    }
}

var bar = document.getElementById('bar'),
    foo = document.getElementById('foo');

moveTo(foo, bar);

JS Fiddle demo

snz8szmq

snz8szmq4#

创建元素

<div id="div1">
     <p id="p1">This is a paragraph.</p>
     <p id="p2">This is another paragraph.</p>
    </div>

    <script>
    var para=document.createElement("p");
     var node=document.createTextNode("This is new.");
    para.appendChild(node);

     var element=document.getElementById("div1");
    element.appendChild(para);
    </script>

删除一个元素(必须知道父元素)

<div id="div1">
     <p id="p1">This is a paragraph.</p>
     <p id="p2">This is another paragraph.</p>
    </div>
    <script>
     var parent=document.getElementById("div1");
      var child=document.getElementById("p1");
      parent.removeChild(child);
    </script>

http://www.w3schools.com/js/js_htmldom_elements.asp提供

dgsult0t

dgsult0t5#

您可以将现有节点附加到另一个节点,从而将其移动到新位置:

var move_me = document.getElementById("to_move"),
    new_parent = document.getElementById("new_parent");
// the magic. appendChild moves elements
new_parent.appendChild(move_me);

另请参阅MDN。不会变得更简单。请注意,这将保留事件侦听器和其他东西,通常是期望的结果,但如果您不再需要它们,请记住。并且可能比所有.innerHTML解决方案更有效。

相关问题