jQuery替换元素内容|极客教程

jQuery替换元素内容

在Web开发中，经常需要动态地修改页面上的元素内容。jQuery是一个非常流行的JavaScript库，它提供了简洁的语法和强大的功能，使得操作DOM变得更加方便和高效。本文将介绍如何使用jQuery来替换页面上的元素内容。

使用`text()`方法替换文本内容

jQuery提供了text()方法来设置元素的文本内容。通过选择器选取到需要修改内容的元素，然后使用text()方法来设置新的文本内容。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery替换元素内容示例</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<p id="myParagraph">原始文本内容</p>

<script>
  // 选取元素并替换文本内容
  $('#myParagraph').text('新的文本内容');
</script>

</body>
</html>

上面的示例代码中，首先引入jQuery库，然后通过$('#myParagraph')选取到id为myParagraph的段落元素，最后使用text()方法将段落内容替换为”新的文本内容”。

运行结果为页面上的段落元素内容被替换为”新的文本内容”。

使用`html()`方法替换HTML内容

除了替换文本内容外，有时还需要替换元素内的HTML内容。可以使用html()方法来设置元素的HTML内容。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery替换元素内容示例</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

<div id="myDiv"><p>原始HTML内容</p></div>

<script>
  // 选取元素并替换HTML内容
  $('#myDiv').html('<p>新的HTML内容</p>');
</script>

</body>
</html>

上面的示例代码中，选取id为myDiv的<div>元素，并使用html()方法替换其内的HTML内容为<p>新的HTML内容</p>。

运行结果为页面上的<div>元素内的HTML内容被替换为新的HTML内容。