views:

48

answers:

2

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?

+2  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.

Nick Craver
this would require jQuery.
David Murdoch
That's jQuery is it? There are so many libraries that key everything off a variable called `$`. Sigh.
David Dorward
@David - Yes you're right, updated, I was thinking of `.replaceWith()` and didn't even look at the tags: http://api.jquery.com/replaceWith/ Thanks for pointing it out!
Nick Craver
@David Dorward: but the only one that really matters is jQuery. :-p
David Murdoch
I have to accept David's answer because of the way I put my question. After all, I asked how I could do it with DOM tree modification methods. However, the jQuery one-liner is definitely the way to go for me. Thanks!
Pieter
+5  A: 

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);
} 
David Dorward