Add Html to Text without children element

Question

I am very confused on how to get this work, did a lot of research online to help find a solution to this, but got nothing. Found this link here: http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/ but still didnt help much

This is what I am trying to accomplish, the system is outputting text like this, I have no control over the html.

<div class="myclass"> 
Text 1 
Text 2
Text 3        
</div>`

but would like to use jquery to insert html around those text For example:

<div class="myclass"> 
 <span>Text 1 </span> 
 <span> Text 2 </span> 
 <span> Text 3</span>
 </div>

any help is appreciated

thank you very much

Possible duplicate: http://stackoverflow.com/questions/4147080/can-i-wrap-each-line-of-multi-line-text-in-a-span — showdev, Feb 06 '13 at 22:19

score 2 · Answer 1 · answered Feb 06 '13 at 22:29

2

$('.myclass').html(function(i, v){
    return '<span>' + $.trim(v).split('\n').join('</span><span>') + '</span>';
});

http://jsfiddle.net/vDp6A/

answered Feb 06 '13 at 22:29

Ram

143,282
16
168
197

score 0 · Answer 2 · answered Feb 06 '13 at 22:21

There are other ways. This would satisfy the question.

$(function(){

  stuff=$('.myclass').text().split("\n");

  newhtml='';
  $.each(stuff, function(i,o){
    if (o!=''){
      newhtml +='<span>' + o + '</span>'."\n";
    }
  });
  $('.myclass').html(newhtml);

});

MDEV · Answer 3 · 2013-02-06T22:27:28.417

This should sort it:

var theDivs = document.getElementsByClassName('myclass');

for(var i in theDivs)
{
    if(parseInt(i)==i)
    {
        var div = theDivs[i];
        var text = div.innerHTML.split("\n");
        for(var k in text)
        {
            var trimmed = text[k].replace(/^\s+|\s+$/,'');
            if(trimmed != '') text[k] = '<span>'+trimmed+'</span>';
            else text[k] = trimmed;
        }
        div.innerHTML = text.join("\n");
    }
}

Add Html to Text without children element

3 Answers3