I am trying to convert a ma separated list into a <ul> list.

HTML

<div class="fruit">apple,banana,melon</div>

JS

$('.fruit').each(function(){
    var txt = $(this).text();
    $(this).html(txt.replace(/,/g,'</li><li>'));
}).wrapInner('<ul><li></li></ul>');

I expected...

<div class="fruit">
    <ul>
        <li>apple</li>
        <li>banana</li>
        <li>melon</li>
    </ul>
</div>

But, the result is...

<div class="fruit">
    <ul>
        <li>apple
        <li>banana</li>
        <li>melon</li>
        </li>
    </ul>
</div>

Why the first ma, between "apple" and "banana", is replaced with only '<li>', and the missing '</li>' moves to the last, behind "melon"?

Or, should I use other methods like split() & join() to get a right result?

I am trying to convert a ma separated list into a <ul> list.

HTML

<div class="fruit">apple,banana,melon</div>

JS

$('.fruit').each(function(){
    var txt = $(this).text();
    $(this).html(txt.replace(/,/g,'</li><li>'));
}).wrapInner('<ul><li></li></ul>');

I expected...

<div class="fruit">
    <ul>
        <li>apple</li>
        <li>banana</li>
        <li>melon</li>
    </ul>
</div>

But, the result is...

<div class="fruit">
    <ul>
        <li>apple
        <li>banana</li>
        <li>melon</li>
        </li>
    </ul>
</div>

Why the first ma, between "apple" and "banana", is replaced with only '<li>', and the missing '</li>' moves to the last, behind "melon"?

Or, should I use other methods like split() & join() to get a right result?

• javascript
• jquery

Share Improve this question Follow asked Mar 24, 2015 at 21:13 YukaYuka 1111 silver badge33 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

This is one way of doing it:

$('.fruit').html(function(_, oldHTML) {
   return '<ul><li>' + oldHTML.split(',').join('</li><li>') + '</li></ul>';
});

Please refer the pen

<div class="fruits">apple,banana,melon</div>



var fruitsNode = document.querySelector('.fruits');
var fruits = fruitsNode.innerHTML.split(',');

var fruitsHTML = [];
fruits.forEach(function(fruit){
  fruitsHTML.push('<li>' + fruit + '</li>');
});

fruitsNode.innerHTML = fruitsHTML.join('');

If that is all you want to do, use a simple (untested) one-liner like '<ul><li>' + document.getElementsByClassName("fruit")[0].textContent.replace(',', '</li><li>') + '</li></ul>'.

On the other hand, if you want to re-use this in different places (dynamic class names, element types, etc) then you would want to refactor into a proper method.

Because you applied wrapInner to each. Your regex is ok.

To fix it apply wrapInner to html:

    $('.fruit').each(function(){
        var txt = $(this).text();
        $(this).html(txt.replace(/,/g,'</li><li>')).wrapInner('<ul><li></li></ul>');
    });

However what you're passing to wrapInner is not valid html. This doesn't break things but I'd prefer something more clean like this:

$('.fruit').each(function(){
    var txt = $(this).text();
    $(this).html('<ul><li>' + txt.replace(/,/g,'</li><li>') + '</li></ul>');});

Why the first ma, between "apple" and "banana", is replaced with only <li>, and the missing </li> moves to the last, behind "melon"?

It's not. That's just the result of the invalid html that you created:

apple</li><li>banana</li><li>melon

Which got parsed into

apple<li>banana</li><li>melon</li>

when you use .html(). And that got wrapped into <ul><li>…</li></ul> by .wrapInner - which leads to the invalid DOM with nested <li> tags you're seeing.

should I use other methods like split() & join() to get a right result?

Yes. I'd remend

$('.fruit').contents().replaceWith(function(){
    return $('<ul>').append($(this.data.split(",")).map(function() {
        return $('<li>').text(this).get();
    }));
})

I remend Vohuman's method. Here's just another way of doing.. less handy, but still an option.

var getContent = $('.fruit').html().split(',');
var list = '<ul>';
$(getContent ).each(function(key,value){
    list += '<li>'+ value +'</li>';
    }

list += '</ul>'; //list now contains a plete list.