"Cut and Paste" - moving nodes in the DOM with Javascript

In this case, document.getElementById('id1').appendChild(document.getElementById('id2')); should do the trick.

More generally you can use insertBefore().


This function takes any node that is passed into it and wraps it with the tag given. In the example code snippet I wrapped a span tag with a section tag.

function wrap(node, tag) {
  node.parentNode.insertBefore(document.createElement(tag), node);
  node.previousElementSibling.appendChild(node);
}

function wrap(node, tag) {
  node.parentNode.insertBefore(document.createElement(tag), node);
  node.previousElementSibling.appendChild(node);
}
let toWrap = document.querySelector("#hi");
wrap(toWrap, "section");
console.log(document.querySelector("section > #hi"), " section wrapped element");
<span id="hi">hello there!</span>

You can use insertAdjacentElement instead of appendChild to have more control about the position of element with respect to a target element.

Syntax: targetElement.insertAdjacentElement(position, element). It has four position codes as:

  • 'beforebegin': Before the targetElement itself.
  • 'afterbegin': Just inside the targetElement, before its first child.
  • 'beforeend': Just inside the targetElement, after its last child.
  • 'afterend': After the targetElement itself.

it appears as:

//beforebegin
<p>
  //afterbegin
  foo
  //beforeend
</p>
//afterend

In your case, you can write the code as:

document.getElementById('id2').insertAdjacentElement('beforebegin', document.getElementById('id3'));

Note that this way, you don't need reference the parent (container) element!

Also consider You have more elements than id2, id3, eg: id4, id5, id6. Now, if you want to reposition for example id5 after id2, its as simple as:

function changePosition() {
   document.getElementById('id2').insertAdjacentElement('afterend', document.getElementById('id5'));
}
<div id='container'>
  <div id='id1'>id1</div>
  <div id='id2'><u>id2</u></div>  
  <div id='id3'>id3</div>  
  <div id='id4'>id4</div>  
  <div id='id5'><b>id5</b></div>  
  <div id='id6'>id6</div>  
</div>

<p><input type='button' onclick="changePosition()" value="change position"></p>