jQuery 如何使用jQuery设置标签的文本

在本文中，我们将介绍使用jQuery如何设置标签的文本内容。

阅读更多：jQuery 教程

获取和设置标签文本

在jQuery中，可以使用.text()方法来获取和设置标签的文本内容。该方法既可用于普通标签，也可用于表单元素的标签。

<p id="myParagraph">这是一个段落。</p>

<script>
  // 获取标签文本
  var text = ("#myParagraph").text();
  console.log(text);  // 输出： 这是一个段落。

  // 设置标签文本("#myParagraph").text("这是新的文本。");
</script>

在上面的例子中，首先通过选择器获取id为”myParagraph”的段落标签的文本内容，并将结果赋值给变量text。然后使用.text()方法设置该段落标签的新文本内容为”这是新的文本。”。

获取和设置表单元素的文本

除了普通的标签，我们也可以使用.text()方法获取和设置表单元素的文本内容。要注意的是，表单元素的文本内容是通过其value属性来获取和设置的。

<input type="text" id="myInput" value="默认文本">

<script>
  // 获取表单元素的文本
  var text = ("#myInput").val();
  console.log(text);  // 输出： 默认文本

  // 设置表单元素的文本("#myInput").val("新的文本");
</script>

在上面的例子中，通过选择器获取id为”myInput”的文本输入框的文本内容，并将结果赋值给变量text。然后使用.val()方法设置该文本输入框的新文本内容为”新的文本”。

嵌套标签的文本设置

如果要设置嵌套标签的文本内容，可以使用.html()方法。该方法会返回或设置HTML标签及其内部内容。

<div id="myDiv">
  <h1>标题</h1>
  <p>这是一个段落。</p>
</div>

<script>
  // 获取嵌套标签的文本
  var html = ("#myDiv").html();
  console.log(html);  // 输出： <h1>标题</h1><p>这是一个段落。</p>

  // 设置嵌套标签的文本("#myDiv").html("<h1>新的标题</h1><p>新的段落。</p>");
</script>

在上面的例子中，使用选择器获取id为”myDiv”的div元素下的所有HTML标签及其内部内容，将结果赋值给变量html。然后使用.html()方法设置该div元素的新的HTML标签及其内部内容为”

新的标题

新的段落。

“。

总结

本文介绍了如何使用jQuery设置标签的文本内容。通过.text()方法，我们可以获取和设置普通标签和表单元素的文本内容。对于嵌套标签的文本设置，可以使用.html()方法来返回或设置HTML标签及其内部内容。使用这些方法，我们可以灵活地操作标签的文本内容，实现各种需求。