使用 jQuery 替换 HTML答案

【问题标题】：Replace HTML Using jQuery使用 jQuery 替换 HTML
【发布时间】：2012-08-24 16:45:33
【问题描述】：

function toText()
{
    var convertHTML =$('#mainContent').html();
    var ele = $(convertHTML + " > span").each(function(){
        $(this).replaceWith($(this).text());
    });
    console.log(ele);


}

我的目的是替换下面的内容

    <div id="mainContent">
    test
<br>
    1234
<br>
    <span class="underline">test</span>
<br>
    <span class="underline">1234</span>
    </div>

并希望我的函数输出测试 1234 test 1234

这就是为什么我不能只使用 text() 因为它也带走了 ！

【问题讨论】：

标签： javascript jquery html jquery-selectors

【解决方案1】：

试试这样：

function toText()
{
    var ele = $("#mainContent > span").each(function(){
        $(this).replaceWith($(this).text());
    });
    console.log(ele);
}

你使用整个 html 块作为 jQuery 选择器:)

【讨论】：

【解决方案2】：

您正在获取从 $("#mainContent").html() 返回的 html 字符串并尝试将其用作下一行的选择器的一部分，而您真正需要的选择器是 "#mainContent > span"。

试试这个：

function toText()
{
    $("#mainContent > span").replaceWith(function(){ return $(this).text(); });
}

您不需要.each() 循环：如果您将一个函数传递给.replaceWith()，则该函数会为您的jQuery 对象中的每个元素调用一次，并且您的返回值将用作当前元素的替换。

演示：http://jsfiddle.net/7xKzP/

【讨论】：

【解决方案3】：

var convertHTML =$('#mainContent').html(); 中的convertHTML 不是 jQuery 对象

你必须写

var ele = $("#mainContent > span").each(function(){
        $(this).replaceWith($(this).text());
    });

原因：

$('#mainContent').html(); 将返回string，而不是让$.each 工作的jQuery 对象。

var ele = $(convertHTML + " > span") 的意思是

var ele = $("test 1234 test 1234" + " > span")

【讨论】：