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

Share Improve this question Follow asked Apr 23, 2010 at 13:15 PieterPieter 32.9k7878 gold badges171171 silver badges248248 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.