Как изменить расположение элемента в DOM при загрузке страницы?

Question

[Roman Otradny]

Приветствую друзья.

Есть задача перемещать один дочерний див при загрузке страницы. Вот код:

<div id="ParentDiv">
    <div id="LeftColParent">
        <div id="LeftCol"></div>
    </div>
    <div id="MainCol">
        <div id="CenterCol"></div>
        <div id="RightCol"></div>
    </div> 
</div>

Переместить нужно RightCol под LeftCol, вот так:

<div id="ParentDiv">
    <div id="LeftColParent">
        <div id="LeftCol"></div>
        <div id="RightCol"></div>
    </div>
    <div id="MainCol">
        <div id="CenterCol"></div>
        
    </div> 
</div>

Как делать такое по клику я научился:

document.getElementById('RightCol').addEventListener('click', function() {
    var newParent = this.parentNode.id == 'LeftCol' ? 'CenterCol' : 'LeftCol';
    document.getElementById(newParent).appendChild(this);
}, false);

При клике на RightCol он перемещается туда-сюда.

Как сделать, чтобы RightCol находился под LeftCol при загрузке страницы?

Answer 1

[soface]

var parent = document.getElementById('LeftColParent');
var right = document.getElementById('RightCol');
parent.appendChild(right);

Comments

[Roman Otradny]

Благодарю!

Answer 2

[netW0rm]

Перемещение по клику реализовано не верно.
в результате получается:

<div id="ParentDiv">
    <div id="LeftColParent">
        <div id="LeftCol"><div id="RightCol"></div></div>        
    </div>
    <div id="MainCol">
        <div id="CenterCol"></div>        
    </div> 
</div>

или

<div id="ParentDiv">
    <div id="LeftColParent">
        <div id="LeftCol"></div>        
    </div>
    <div id="MainCol">
        <div id="CenterCol"><div id="RightCol"></div></div>        
    </div> 
</div>

пример правильной реализации