jquery 修改元素文本

原创

mob64ca12de62a6 2023-08-29 11:09:44 ©著作权

文章标签 html 示例代码 jQuery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12de62a6的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 修改元素文本

1. 介绍

在前端开发中，经常需要对网页中的元素进行修改。其中一个常见的需求就是修改元素的文本内容。使用jQuery可以很方便地实现这个功能。本文将介绍jQuery修改元素文本的方法，并提供相关的代码示例。

2. jQuery 修改元素文本的方法

2.1 使用 text() 方法

使用text()方法可以获取或设置指定元素的文本内容。下面是使用text()方法设置元素文本的示例代码：

$("#elementId").text("新的文本内容");

上述代码中，#elementId是元素的id，通过该id可以定位到需要修改文本的元素。text()方法的参数是新的文本内容。

2.2 使用 html() 方法

除了text()方法，还可以使用html()方法来修改元素的文本内容。html()方法可以获取或设置指定元素的HTML内容。下面是使用html()方法设置元素文本的示例代码：

$("#elementId").html("<b>新的文本内容</b>");

上述代码中，#elementId是元素的id，通过该id可以定位到需要修改文本的元素。html()方法的参数是新的HTML内容。

2.3 使用 val() 方法

如果需要修改输入框的文本内容，可以使用val()方法。val()方法用于获取或设置表单元素的值。下面是使用val()方法设置输入框文本的示例代码：

$("#inputId").val("新的文本内容");

上述代码中，#inputId是输入框的id，通过该id可以定位到需要修改文本的输入框。val()方法的参数是新的文本内容。

3. 示例代码

下面是一个使用text()方法修改元素文本的完整示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 修改元素文本示例</title>
  <script src="
</head>
<body>
  原始标题

  <script>
    // 使用text()方法修改标题文本
    $("#title").text("新的标题");
  </script>
</body>
</html>

上述代码中，首先引入了jQuery库，然后定义了一个带有id为title的h1标签。在script标签中使用text()方法修改了标题的文本内容。

4. 类图

下面是使用mermaid语法绘制的类图，展示了text()、html()和val()方法的关系：

classDiagram
    class Element {
        <<interface>>
        +text()
        +html()
    }

    class InputElement {
        +val()
    }

    class DivElement {
        +text()
        +html()
    }

    Element <|-- InputElement
    Element <|-- DivElement