将 Html 添加到没有子元素的文本答案

【问题标题】：Add Html to Text without children element将 Html 添加到没有子元素的文本
【发布时间】：2013-02-06 22:16:02
【问题描述】：

我对如何获得这项工作感到非常困惑，在网上做了很多研究以帮助找到解决方案，但一无所获。在此处找到此链接：http://viralpatel.net/blogs/jquery-get-text-element-without-child-element/ 但仍然没有太大帮助

这是我想要完成的，系统正在输出这样的文本，我无法控制 html。

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

但想使用 jquery 在这些文本周围插入 html 例如：

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

感谢任何帮助

非常感谢

【问题讨论】：

可能重复：stackoverflow.com/questions/4147080/…

标签： javascript jquery

【解决方案1】：

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

http://jsfiddle.net/vDp6A/

【讨论】：

【解决方案2】：

还有其他方法。这将满足这个问题。

$(function(){

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

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

});

【讨论】：

【解决方案3】：

这应该对其进行排序：

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");
    }
}

【讨论】：