Wrap tags around items inside existing <li> elements using jQuery

Question

I am using jquery to create a list, using the: $(list).append(item); (where list is the list reference, and item are the $('<li>') items being added, as follows:

var item = $('<li>')
$(item).append('Some Data').append('some more data');
$(list).append(item);

This creates a list in the following format, which has been working well:

<ul>
    <li>Some data, and some more Data from the 'list' var</li>
    <li>Some data, and some more Data from the 'list' var</li>
    <li>Some data, and some more Data from the 'list' var</li>
    <li>Some data, and some more Data from the 'list' var</li>
</ul>

I now want to try and make this look better with some css, and so I want to wrap various tags around elements within this list, but I'm struggling to get the syntax properly.

What I am hoping to achieve is this:

<ul>
    <li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
    <li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
    <li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
    <li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
    <li><div>Some data and <h3>some more Data from the ‘list’ var</h3></div></li>
</ul>

I have tried manually adding the tags in (for example, using + “<div>” and + “</div>” but this seems to open and close the tags at the same time (ie it renders <div></div> , regardless of where I actually place the closing tag); I've tried doing this using .append(“<div>”) , etc, etc, at the points that I want them to appear in the string, with similar results. I've tried using .wrap() , but this makes all the text disappear (which makes me think I've got the syntax wrong!).

Can anyone advise on the best way of achieving what I want to achieve?

Answer 1

You can append anything to your new item, including other elements which you create with jQuery.

And before adding your entry to the existing list, you can wrap the added elements into another tag:

 var list = document.querySelector('ul'); $('<li>') .append('some data') // add text .append($('<h3>', { text: 'some more data' })) // add h3 with text .wrapInner('<div>') // wrap everything in div .appendTo(list); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul></ul> 

Answer 2

You need to wrap the contents of the LI (that includes raw text nodes, which your text is in):

$('li').contents().wrap("<div><h3/></div>");

JSFiddle: http://jsfiddle.net/TrueBlueAussie/a447v8d9/

But, as @Arun P Johny pointed out, there is a newer/shorter wrapInner

$('li').wrapInner('<div><h3/></div>')

JSFiddle: http://jsfiddle.net/TrueBlueAussie/a447v8d9/5/

When you wrap anything in multiple nested elements, it inserts the elements to be wrapped inside the first "deepest" element. eg http://jsfiddle.net/TrueBlueAussie/a447v8d9/4/

Also only the first "root level" element in your wrapper is used: eg http://jsfiddle.net/TrueBlueAussie/a447v8d9/3/ will not use the second div .

Update:

As you only want to wrap parts of the text in the H3, you need to modify the html() instead, so go with @Arun P Johny's solution.

Answer 3

You can use .wrapInner() to wrap the inner content

$('ul li').wrapInner('<div />');

$('ul li div').html(function(i, html){
    return html.substring(0, 15) + '<h3>' + html.substring(15) + '</h3>'
});

Demo: Fiddle

Note: To use the h3 you need to specify what content to be wrapped