js使用html()或text()方法获取设置p标签的显示的值

获取和设置HTML元素的文本内容是在前端开发中最常见的操作之一。在JavaScript中，可以使用html()或text()方法来获取或设置P标签的文本内容。下面我来详细讲解如何使用这两个方法。

使用 html() 方法

获取P标签的文本内容

我们可以使用html()方法获取P标签的HTML内容，如果P标签不包含HTML元素，则返回纯文本内容。

// HTML
<p id="myParagraph">Hello World</p>

// JavaScript
const myParagraph = $('#myParagraph');
const myParagraphHtml = myParagraph.html();
console.log(myParagraphHtml); // "Hello World"

上述代码中，我们首先通过id选择器获取了一个P标签元素，然后使用html()方法获取了该元素的HTML内容。由于P标签中只包含了纯文本，所以返回的内容也是纯文本。

设置P标签的文本内容

我们可以使用html()方法来设置P标签的HTML内容。

// HTML
<p id="myParagraph"></p>

// JavaScript
const myParagraph = $('#myParagraph');
myParagraph.html('<strong>Hello World</strong>');

上述代码中，我们首先通过id选择器获取了一个P标签元素，然后使用html()方法设置该P标签的HTML内容。在本例中，我们设置了P标签的内容为<strong>Hello World</strong>，这样就会在网页上显示"Hello World"，并且文本会被加粗。

使用 text() 方法

获取P标签的文本内容

我们可以使用text()方法获取P标签的文本内容。

// HTML
<p id="myParagraph">Hello World</p>

// JavaScript
const myParagraph = $('#myParagraph');
const myParagraphText = myParagraph.text();
console.log(myParagraphText); // "Hello World"

上述代码中，我们首先通过id选择器获取了一个P标签元素，然后使用text()方法获取了该元素的文本内容。

设置P标签的文本内容

我们可以使用text()方法来设置P标签的文本内容。

// HTML
<p id="myParagraph"></p>

// JavaScript
const myParagraph = $('#myParagraph');
myParagraph.text('Hello World');

上述代码中，我们首先通过id选择器获取了一个P标签元素，然后使用text()方法设置该P标签的文本内容。在本例中，我们设置了P标签的内容为"Hello World"，这样就会在网页上显示"Hello World"。

在实际项目中，我们通常会用到这两个方法来动态修改网页元素的内容，从而实现更好的用户交互效果。