JavaScript 移动元素
本教程将讨论使用 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 更改标签文本
发布时间:2024/03/23 浏览次数:102 分类:JavaScript
-
本文演示了如何使用 JavaScript 更改标签文本。它还指导我们如何使用 jQuery 做同样的事情。
JavaScript 更改按钮文本
发布时间:2024/03/18 浏览次数:191 分类:JavaScript
-
本教程展示了如何使用 JavaScript 更改按钮文本,并演示了使用 jQuery 更改按钮文本。
JavaScript 更改文本
发布时间:2024/03/17 浏览次数:65 分类:JavaScript
-
我们可以使用 JavaScript 中的 textContent 属性和 createTextNode() 函数更改元素的文本。
使用 JavaScript 更改标题元素的文本
发布时间:2023/01/01 浏览次数:122 分类:JavaScript
-
使用 textContent 属性更改标题元素的文本,例如 heading.textContent = Replacement heading text 。 textContent 属性会将标题文本设置为提供的字符串,替换任何现有内容。 以下是本文示例的 HTML。
使用 JavaScript 更改标签元素的文本
发布时间:2022/12/16 浏览次数:403 分类:JavaScript
-
使用 textContent 属性更改标签元素的文本,例如 label.textContent = Replacement label text 。 textContent 属性会将标签的文本设置为提供的字符串,替换任何现有内容。 以下是本文示例的 HTML。 i