Question

I have some nested lists and I want to be able to insert a previous level element:

<ul>
<li>Item 1
<ul>
<li class="selecteditem">Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
</ul>
</li>
<li>Item 2</li>
</ul>
<!-- language: lang-js -->
//I try to do it as follows:
$('li.selecteditem').after('</ul></li><ul>"...

But the after() method only allows to insert DOM nodes, so all the closed tags “” are ignored.
Is there a way to inject this html string literally exactly where I want it?

Thanks in advance for your help

Answer 1

I see what you need now, but DOM manipulation can only occur given DOM nodes, or valid markup that can be converted to DOM nodes. What you can do is something like this, although this is a pretty hacky solution:

var html = $('ul').html().replace('<li class="selecteditem">Item 1.1</li>','<li class="selecteditem">Item 1.1</li></ul></li><ul>...');
$('ul').html(html);