如何在div中包装文本而留下其他标签？

Question

我有以下html

<p><img src="" /> some text</p>

如何使用<span>标记仅限 。

最终结果应为

<p><img src="" /><span>some text</span></p>

Answer 1

根据您是否使用框架，有多种方法可以执行此操作。这基本上是你如何使用vanilla js，简单的旧js。

var ps = document.getElementsByTagName('p');
var text = ps[0].innerText;

ps[0].innerHTML = ps[0].innerHTML.replace(text, '<span>' + text + '</span>');

Answer 2

我发现使用文本功能也很有用

$(function(){
    $('p').text(function(i, oldText){
        return oldText;
    }).wrap("<span>");
});

demo

Answer 3

如果选择器与唯一图像匹配，则执行此操作：

$("selector").html($("<span/>", { text: $("selector").text() });

如果它与多个元素匹配，则需要使用.each()分别处理每个元素;正文将在上面，$("selector")替换为$(this)。

Answer 4

你可以尝试

$('p').contents().filter(function(){
    return this.nodeType == 3
}).wrap('<span/>')

演示：Fiddle

Answer 5

var text = $('p').text();
var img = $('p img').attr('src');
$('p').html('').append('<img src="'+img+'" /><span>'+text+'</span>');