Given the following dom structure I would like to transform an ordered list to an unordered list.

<div class="wrapper"> 
  <ol>
    <li><div>foo</div></li>
    <ol>
      <li><div>bar</div></li>
    </ol>
    <li><div>batz</div></li>
  </ol>
</div>

What is the best way to do this?

Given the following dom structure I would like to transform an ordered list to an unordered list.

<div class="wrapper"> 
  <ol>
    <li><div>foo</div></li>
    <ol>
      <li><div>bar</div></li>
    </ol>
    <li><div>batz</div></li>
  </ol>
</div>

What is the best way to do this?

• javascript
• jquery
• regex

• No need for a regex based on your example. – j08691 Commented Oct 1, 2012 at 18:51
• 2 Regex is not a good solution when you are trying to parse HTML or XML: stackoverflow./questions/1732348/… – Renato Lochetti Commented Oct 1, 2012 at 18:52
• well i thought maybe getting the string and replacing it with regex would be faster than doing it with jquery. – supernova Commented Oct 1, 2012 at 18:52
• 1 @supernova There is no performance concern unless there is a performance concern .. – user166390 Commented Oct 1, 2012 at 18:57
• There are some excellent answers in this question: stackoverflow./a/12510109/981208 – FixMaker Commented Oct 1, 2012 at 19:08

2 Answers 2

You should use jQuery replaceWith.

ok i had to work from the inside to the outside, only replaceWith wasn't working because it replaced only the outer tags and didn't replace the inner ones, so i solved it this way:

$($('.wrapper').find('ol').get().reverse()).each(function(){
  $(this).replaceWith($('<ul>'+$(this).html()+'</ul>'))
})

if someone has a better solution i would be glad to hear it.