如何使用jQuery来操纵HTML元素的内容

最新推荐文章于 2022-01-25 11:13:01 发布

G018_star sky♬

最新推荐文章于 2022-01-25 11:13:01 发布

阅读量389

点赞数 1

本文链接：https://blog.csdn.net/qq_42526440/article/details/100996151

版权

JavaScript 同时被 3 个专栏收录

95 篇文章 5 订阅

订阅专栏

CSS

51 篇文章 0 订阅

订阅专栏

jQuery

12 篇文章 0 订阅

订阅专栏

我们知道使用text()和html()方法可以用来操纵HTML元素的内容。
另一个有用的方法是val()方法，它允许我们获取和设置表单字段的值，例如：
文本框(input)，下拉列表(select)等。
HTML：

<input type="text" id="name" value="your name">

JS：
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsction(){ alert($ ("#name").val());
});

总结：
以下jQuery方法可用于获取和设置所选HTML元素的内容和属性：

text() 设置或返回所选元素的文本内容。

html() 设置或返回所选元素的内容（包括HTML标签）。

val() 设置或返回表单字段的值。

attr() 设置或返回属性的值。

removeAttr() 删除指定的属性。

添加内容：
正如我们在以前的课程中所看到的，html() 和 text() 方法可以用于获取和设置所选元素的内容。

然而，这些方法用于设置内容时，现有内容将被覆盖。

jQuery具有用于向所选元素添加新内容而不删除现有内容的方法：

append() 在所选元素的末尾插入内容。

prepend() 在所选元素的开头插入内容。

after() 插入所选元素后的内容。

before() 在所选元素之前插入内容。

以p段落为例,示意图:

在这里插入图片描述

1.append() 方法在所选HTML元素的末尾插入内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</head>

<body>
<p id="demo">Hi </p>
<script>
$(function() {
  $("#demo").append("David");
});
//最终输出 "Hi David"
</script>

</body>
</html>

2.before() 方法在被选元素之前插入指定内容。
after() 方法在被选元素之后插入指定内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</head>

<body>
<p id="demo">Hi</p>
<script>
$(function() {
  $("#demo").before("<i>Some Title</i>");   
  $("#demo").after("<b>Welcome</b>");
});
</script>
</body>
</html>

3.append()，prepend()，before() 和 after() 方法也可用于添加新创建的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</head>
<body>
<p id="demo">Hello</p>
<script>
$(function() {
  var txt = $("<p></p>").text("Hi");
  $("#demo").after(txt);
});
</script>
</body>
</html>

G018_star sky♬

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何使用jQuery来操纵HTML元素的内容

我们在上一课中已经看到我们如何使用text()和html()方法来操纵HTML元素的内容。另一个有用的方法是val()方法，它允许我们获取和设置表单字段的值，例如：文本框(input)，下拉列表(select)等。HTML：<input type="text" id="name" value="your name">JS：KaTeX parse error: Expect...
复制链接

扫一扫

专栏目录