js 通过html()及text()方法获取并设置p标签的显示值

编程基础网 Java开发

2024-01-03

获取并设置p标签的显示值有两种主要方法，分别是html()和text()方法。

获取并设置<p>标签的显示值有两种主要方法，分别是html()和text()方法。

使用html()方法获取并设置

标签的显示值

获取

标签的内容

html()方法可以获取指定元素（如<p>标签）的内容。以下是几种常见的用法：

// 获取<p>标签的内容
let content = $('p').html();
console.log(content); // 打印<p>标签的内容

设置

标签的内容

html()方法还可以设置元素的内容。以下是几种常见的用法：

// 设置<p>标签的内容
$('p').html('这是新的内容');

使用text()方法获取并设置

标签的显示值

获取

标签的内容

text()方法可以获取指定元素（如<p>标签）的纯文本内容（即去除标签的文本内容）。以下是几种常见的用法：

// 获取<p>标签的纯文本内容
let content = $('p').text();
console.log(content); // 打印<p>标签的纯文本内容

设置

标签的内容

text()方法还可以设置元素的纯文本内容。以下是几种常见的用法：

// 设置<p>标签的纯文本内容
$('p').text('这是新的纯文本内容');

示例1：使用html()方法获取并设置

标签的内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例1</title>
    <script src="jquery.js"></script>
</head>
<body>
    <p id="demo">这是一段文本。</p>
    <script>
        let content = $('#demo').html(); //获取<p>标签的内容
        console.log(content); //打印<p>标签的内容

        $('#demo').html('这是新的内容'); //设置<p>标签的内容
    </script>
</body>
</html>

示例2：使用text()方法获取并设置

标签的纯文本内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例2</title>
    <script src="jquery.js"></script>
</head>
<body>
    <p id="demo">这是一段文本。</p>
    <script>
        let content = $('#demo').text(); //获取<p>标签的纯文本内容
        console.log(content); //打印<p>标签的纯文本内容

        $('#demo').text('这是新的纯文本内容'); //设置<p>标签的纯文本内容
    </script>
</body>
</html>

编程基础网

本文标题为：js 通过html()及text()方法获取并设置p标签的显示值