I have a list of <li> elements:

<ul id="mylist">
  <li id="item1">Item 1</li>
  <li id="item2">Item 2</li>
  <li id="item3">Item 3</li>
</ul>

Can I swap two <li> elements - say item1 and item2 - with the replaceChild, one of the DOM tree modification methods? Will it work in all browsers?

I have a list of <li> elements:

<ul id="mylist">
  <li id="item1">Item 1</li>
  <li id="item2">Item 2</li>
  <li id="item3">Item 3</li>
</ul>

Can I swap two <li> elements - say item1 and item2 - with the replaceChild, one of the DOM tree modification methods? Will it work in all browsers?

• javascript
• html
• dom

2 Answers 2

No. replaceChild would remove one from the DOM. You want insertBefore

var a = document.getElementById('item1');
var b = document.getElementById('item2');
a.parentNode.insertBefore(b, a);

Of course, this would only swap them if they were next to each other in the first place.

You could leverage replaceChild if you wanted to swap ones which were not next to each other.

var a = document.getElementById('item1');
var b = document.getElementById('item3');
var after_b = b.nextSibling;
var p = a.parentNode;

p.replaceChild(b,a);

if (after_b) {
    p.replaceChild(a, after_b);
} else {
   p.appendChild(a);
} 

Woops, I didn't look closely enough at your tags. If jQuery is an option: you can use .insertBefore() for this:

​$('#item2').insertBefore('#item1');​​​​​​​​​​​​​​​​​​​​

You can play with it here, this will move not copy the element, resulting in a swap.