So let's assume that I have a set of nested divs:

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

and further down the page:

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

How would I move Test1 to "unlikelyToBeCalled". I've been trying this with a form / submit button just for kicks, here's the code for that:

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

Or something to that effect. Any help would rock

So let's assume that I have a set of nested divs:

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

and further down the page:

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

How would I move Test1 to "unlikelyToBeCalled". I've been trying this with a form / submit button just for kicks, here's the code for that:

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

Or something to that effect. Any help would rock

• javascript
• jquery

• You tagged jquery but your code is in pure javascript, how do you want answer? – Wirone Commented Jun 5, 2012 at 21:54
• action="file:///C:/wamp/www/index.html" --- this looks wrong – zerkms Commented Jun 5, 2012 at 21:56
• Here are a couple of other StackOverflow answers: [Jquery]: stackoverflow.com/questions/1279957/…, [Pure JS]: stackoverflow.com/questions/3415480/… – jwatts1980 Commented Jun 5, 2012 at 21:57
• 1 Also, your example html contains duplicate ID's. – Kevin B Commented Jun 5, 2012 at 21:58

2 Answers 2

Use .appendTo()

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

If I understand what you want:

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

getElementsByTagName('Test1') will not get element with name="Test1", it is supposed to, for example, get all divs (with code getElementsByTagName('div') of course). Next, you have used #likelyOddHeader and other ids twice, but id must be unique.