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

Question

假设我有一组嵌套的

：

<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>

或类似的东西。任何帮助都将是有用的。

- HunderingThooves

---

你打了 [tag:jquery] 的标签，但是你的代码是纯 JavaScript 的，你想要怎样的回答呢？ - Wirone

action="file:///C:/wamp/www/index.html" --- 这看起来不对。 - zerkms

以下是其他 StackOverflow 的答案：[Jquery]: https://dev59.com/THM_5IYBdhLWcg3wq1GF, [Pure JS]: https://dev59.com/D3A75IYBdhLWcg3wOGPS - jwatts1980

此外，您的示例HTML包含重复的ID。 - Kevin B

Answer 1

使用.appendTo()方法

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

- Musa

---

不需要分离它，appendTo会自动将它从先前的位置移除。 - Kevin B

如果你想把它插入在开头而不是结尾，不要忘记使用prependTo。 - Iman

Answer 2

如果我理解你的意思：

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

getElementsByTagName('Test1')不能获取具有name="Test1"属性的元素，它应该可以获取所有div元素（当然要使用getElementsByTagName('div')）。另外，您已经两次使用了#likelyOddHeader和其他id，但是id必须是唯一的。

- Wirone