将 div 元素从一个父 div 移动到另一个答案

【问题标题】：Move div element from one parent div to another将 div 元素从一个父 div 移动到另一个
【发布时间】：2012-06-09 22:56:25
【问题描述】：

所以让我们假设我有一组嵌套的 div：

<div id="likelyToBeCalled">
    <div id="likelyOddHeader" class="row">
        <div id="likelyOddA" class="left" name="test1">Test1</div>
        <div id="LikelyOddB" class="middle"><img src="image002.png"/></div>
        <div id="timeZone" class="right">West</div>
    </div>

在页面下方：

<div id="unlikelyToBeCalled">
    <div id="likelyOddHeader" class="row">
        <div id="likelyOddA" class="left">Test2</div>
        <div id="LikelyOddB" class="middle"><img src="image002.png"/></div>
        <div id="timeZone" class="right">West</div>
    </div>

如何将 Test1 移至“unlikelyToBeCalled”。我一直在尝试使用表单/提交按钮，只是为了好玩，这是代码：

<script type="text/javascript">
    function doSubmit() {
        document.getElementById('unlikelyToBeCalled').appendChild(
            document.getElementsByTagName('Test1')
        );
    }
</script>
<br /><br /><br />
<form method="POST" action="file:///C:/wamp/www/index.html" id="submitform" name="submitform">
    <input type="submit" name="Submit" value="Move divs" onClick="doSubmit()"  />
</form>

或者类似的东西。任何帮助都会摇滚

【问题讨论】：

你标记了jquery，但你的代码是纯javascript，你想怎么回答？
action="file:///C:/wamp/www/index.html" --- 这看起来不对
这里有几个其他 StackOverflow 答案：[Jquery]：stackoverflow.com/questions/1279957/…，[Pure JS]：stackoverflow.com/questions/3415480/…
另外，您的示例 html 包含重复的 ID。

标签： javascript jquery

【解决方案1】：

使用.appendTo()

$('#likelyOddA').appendTo('#unlikelyToBeCalled')

【讨论】：

您不必将其分离，appendTo 会自动将其从之前的位置移除。
如果你想在开头而不是结尾插入 prepentTo，请不要忘记它

【解决方案2】：

如果我明白你想要什么：

$('div[name=test1]').appendTo('#unlikelyToBeCalled');

getElementsByTagName('Test1') 不会获取带有name="Test1" 的元素，例如，它应该获取所有divs（当然是代码getElementsByTagName('div')）。接下来，你已经使用了#likelyOddHeader和其他ids两次，但id必须是唯一的。

【讨论】：