CODEWITHSUNDEEP
javascriptjquery
HunderingThooves
HunderingThooves

Reputation: 992

Move div element from one parent div to another

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

Upvotes: 7

Views: 17550

Answers (2)

Musa
Musa

Reputation: 97672

Use .appendTo()

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

Upvotes: 9

Wirone
Wirone

Reputation: 3373

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.

Upvotes: 5

Related Questions