JavaScript 移动元素

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 移动元素

作者：迹忆客最近更新：2023/03/11 浏览次数：

本教程将讨论使用 JavaScript 中的 appendChild() 函数将一个元素的子元素移动到另一个父元素。

使用 JavaScript 中的 `appendChild()` 函数将一个元素的子元素移动到另一个父元素

我们可以使用 appendChild() 函数在 JavaScript 中将一个元素的子元素移动到另一个父元素。appendChild() 函数将一个孩子添加到给定的父母。首先，我们必须在 JavaScript 中获取元素，我们可以使用 getElementById() 或 querySelector() 函数来完成。之后，如果有多个孩子，我们必须使用循环将每个孩子移动到给定的父母。循环将一一添加所有子项，并在没有更多子项添加到父项时终止。例如，让我们创建两个带有一些子元素的元素，然后使用 appendChild() 函数将一个元素的子元素移动到另一个元素。请参考下面的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="First Parent Element"></div>
    <div id="Second Parent Element">
        <span>Hello World</span>
    </div>
</body>
<script type="text/javascript">
    var FirstParent = document.getElementById('First Parent Element');
    var SecondParent = document.getElementById('Second Parent Element');

    while (SecondParent.childNodes.length > 0) {
        FirstParent.appendChild(SecondParent.childNodes[0]);
    }
    console.log(FirstParent.childNodes)
</script>
</html>

输出：

NodeList(3) [text, span, text]

在上面的代码中，第一个父元素没有任何子元素，第二个父元素有一个子元素。正如你在输出中看到的，循环后的第一个父元素也与第二个父元素具有相同的子元素。我们使用 console.log() 函数来显示第一个父元素的子元素。你还可以将此代码转换为函数，这样你就不必再次编写整个代码。例如，让我们将上面的代码翻转到一个函数中，该函数将接受两个包含两个父元素的 id 的字符串参数。该函数会将第二个参数的子项添加到第一个参数的父项中。请参考下面的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="First Parent Element"></div>
    <div id="Second Parent Element">
        <span>Hello World</span>
    </div>
</body>
<script type="text/javascript">
    function MoveChildren(first, second){
        var FirstParent = document.getElementById(first);
        var SecondParent = document.getElementById(second);

        while (SecondParent.childNodes.length > 0) {
            FirstParent.appendChild(SecondParent.childNodes[0]);
        }
}
    MoveChildren('First Parent Element','Second Parent Element');
    console.log(document.getElementById('First Parent Element').childNodes)
</script>
</html>

输出：

NodeList(3) [text, span, text]

现在，你可以随时使用此函数将一个元素的子元素移动到另一个元素的父元素。

上一篇：在 JavaScript 中移动元素位置

下一篇：JavaScript 查找子元素

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享