1、.html()函数

要获取或修改DOM元素的内容，第一个方法是.html()函数。其使用方法是：如果不向其传递任何参数则获取DOM元素的内容（包括其子元素的HTML标签本身）；如果传入了字符串参数，则使用该字符串替换原DOM元素的内容。

HTML代码如下：

<p class="p1"><span>hello p1!</span></p>
<a href="#" class="changeP1">changeP1</a>

对应的JavaScript代码如下：

$(document).ready(function () {
    console.log($('p').html());
    $('a.changeP1').click(function () {
        $('p.p1').html('<span class="span1">changed!</span>');
        console.log($('p').html());
        return false;
    });
});

以上代码中，当DOM就绪后：

• 首先通过.html()函数获取了p元素的内容，并将其打印在浏览器的控制台中。

• 然后对链接a绑定单击事件。当链接a.changeP1被点击时，通过.html()函数，用参数中的字符串<span class="span1">changed!</span>替换元素p的内容。替换后将替换的内容打印到控制台。

控制台内容如下：

需要注意的是：.html()函数使用span标签及其内容替换了p元素中的内容，但是p元素标签本身并没有被替换，只有被标签包含的部分被替换。如果想连同p元素标签本身一同替换，则可以使用.replaceWith()函数。

2、.replaceWith()函数

HTML代码如下：

<p class="p1">hello p1!</p>
<p class="p2">hello p2!</p>
<a href="#" class="changeP1">changeP1</a>
<a href="#" class="changeP2">changeP2</a>

对应的JavaScript代码如下：

$(document).ready(function () {
    console.log($('p').html());
    $('a.changeP1').click(function () {
        $('p.p1').html('<span class="span1">changed!</span>');
        console.log($('span.span1').html());
        return false;
    });
    $('a.changeP2').click(function () {
        $('p.p2').replaceWith('<span class="span2">changed!</span>');
        console.log($('span.span2').html());
        return false;
    });
});

以上代码中，当DOM就绪后：

• 首先通过.html()函数获取了两个p元素的内容，并将其打印在浏览器的控制台中。

• 然后分别对两个链接a绑定单击事件。

• 当链接a.changeP1被点击时，通过.html()函数，用参数中的字符串<span class="span1">changed!</span>替换元素p的内容。替换后将替换的内容打印到控制台。

• 当链接a.changeP2被点击时，通过.replaceWith()函数，用参数中的字符串<span class="span2">changed!</span>替换元素p的内容。替换后将替换的内容打印到控制台。

替换后的结果如下：

由上可见，.html()函数只是替换p元素标签包含的内容，而.replaceWith()函数会连同p元素标签在内的全部内容一同替换。

要获取或修改DOM元素的内容，第二个方法是.text()函数。.text()函数的作用是获取或修改DOM元素包含的值。其使用方法是，如果不向其传递任何参数，则获取DOM元素的文本值（不包括子元素的标签）。如果传入了字符串参数，则使用该字符串替换原DOM元素的文本值，传入的字符串不论是否包含标签，均会被视为纯文本值，HTML标签会被自动转换为字符实体。

HTML代码如下：

<p class="p1"><span>hello p1!</span></p>
<p class="p2"><span>hello p2!</span></p>
<a href="#" class="changeP1">changeP1</a>
<a href="#" class="changeP2">changeP2</a>

对应的JavaScript代码如下：

$(document).ready(function () {
    $('a.changeP1').click(function () {
        $('p.p1').text('<span class="span1">changed!</span>');
        console.log($('p.p1').text());
        return false;
    });
    $('a.changeP2').click(function () {
        $('p.p2').html('<span class="span2">changed!</span>');
        console.log($('p.p2').text());
        return false;
    });
});

以上代码中，分别使用.text()函数与.html()函数对相似内容进行了操作，操作的结果如下：

页面效果：

网页代码效果：

控制台效果：

从结果可以看出，.text()函数将参数中的字符串作为纯文本内容进行了替换，其中的HTML标签自动进行了转换以实现在页面中的显示。而.html()函数会将参数中的HTML标签作为正常标记进行处理，只有标签内的文本才会被作为文本内容。