词雅网详解如何使用jQuery的html()方法进行添加、获取和重写HTML
这一次，让我们来了解一下“html()”方法，它可以让您使用 jQuery 获取、添加和重写 HTML 元素！
什么是html()方法
让我们从学习“html()”方法的基础开始吧！
通过使用“html()”，您可以获取任何 HTML 元素并有意添加/重写该元素。
例如，假设您有一个这样的 p 元素：
<p>你好！</p>
通过使用“html()”，可以获取这个 p 元素中的文本字符并将 p 元素更改为 a 元素！
还可以将一个p元素增加到3个，或者完全删除也是可以的。
输出一个字符
首先，让我们使用“html()”方法在浏览器上输出一个简单的字符串！
作为“html()”的基本写法，在[目标元素.html(字符串)]参数中指定要输出的字符串即可。
示例
$('body').html('你好！');在这个例子中，我们在 body 元素中输出一个字符串。
当执行时，字符串“你好！”显示在页面上。
如果像这样执行指定要输出到参数的字符串，则可以轻松输出特定的字符串。
此外，还可以指定 HTML 内容！
$('body').html('<h1>你好！</h1>');可以通过在参数中写入“h1标签”来显示h1元素。
这使它成为一种非常方便的方法，因为它允许您添加任意 HTML 内容。
获取HTML元素
现在让我们获取任何 HTML 元素！
如果使用“html()”来获取元素，只需要 [目标元素.html()] ，不需要为参数指定任何内容。
示例
<body>
<p>你好</p>
<a href="#">示例链接</a>
<script>
const result1 = $('p').html();
const result2 = $('a').html();
console.log( result1 );
console.log( result2 );
</script>
</body>执行结果
你好 示例链接
在此示例中，放置了一个 p 元素和一个 a 元素。您可以通过对每个元素执行“html()”轻松获取元素。
看执行示例，可以看到获取到每个p元素和a元素的文本字符！这样，如果不指定“html()”的参数，就可以获得元素，如果指定，则可以添加或重写元素。
这是“html()”的基本要点，请不要忘记！
重写HTML元素
现在让我们用另一个元素重写已经放置的 HTML 元素！要进行这种重写，我们首先需要知道“html()”的一个重要属性。
如果您在目标元素上执行“html()”，所有内容都将被覆盖，这是一个属性！
示例
<body>
<div>
<h1>标题</h1>
<p>示例文本</p>
<a href="#">链接</a>
</div>
<script>
$('div').html('<p>你好</p>');
</script>
</body>执行后的 HTML
<div> <p>你好</p> </div>
在这个例子中，“h1 元素、p 元素和 a 元素”放在了 div 元素中，对吧？
在这种状态下，为 div 元素写入“html('<p>你好</p>')”。然后，查看执行后的 HTML，可以看到 div 元素已经被替换为 html() 指定的 p 元素。
换句话说，原始元素被覆盖并替换为 htm() 指定的新 p 元素。你可以通过覆盖来放置你喜欢的HTML元素，这是“html()”的一个特点。
添加HTML元素
如果您知道如何使用“html()”重写元素，那么添加您喜欢的元素很容易。
这是因为您可以将要添加的元素指定为 html() 的参数。
但是，必须对其进行指定，以免忘记其被覆盖的性质。
示例
<body>
<p>链接从这里开始</p>
<script>
$('p').html('<p>链接从<a href="#">这里</a>开始</p>');
</script>
</body>执行后的HTML
<p>链接从<a href="#">这里</a>开始</p>
在此示例中，放置了一个简单的 p 元素。
可以看到这个p元素的字符串中的“链接从这里开始”添加了a标签。
因为我们使用html() 重写覆盖了原有内容、
关于函数重写
到目前为止，我们已经学习了如何在“html()”的参数中编写任意字符串和 HTML 元素。
但是，您实际上可以将“函数”指定为参数！通过使用这个功能，可以重写更复杂的元素，所以我将介绍它。
作为一般描述方法，将函数指定为参数，如“目标元素.html(index,element){}”。
index：目标元素的索引编号
element：目标HTML内容
让我们用一个简单的例子来看看这些内容！
<body>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<script>
$('li').html( function( index, element ) {
if( index === 1 ) {
return element + '很好！';
}
})
</script>
</body>执行后的HTML
<ul> <li>项目1</li> <li>项目2很好！</li> <li>项目3</li> </ul>
在此示例中，布置了一个包含 3 个 li 元素的列表。
可以看到函数是以这个 li 元素为目标执行的。由于“index”存储了li元素的索引号，所以会依次输入0到2的数字。
“element”中存储了各自的li元素。通过记述“if（index==1）{}”，确定了第二个li元素。然后写上“return element+'很好！'”，只在第二个要素的最后写上“很好！”修改相应参数的值。
html()和类似方法的区别
jQuery 有几个方法具有与“html()”类似的功能。其中，“text()”和“append()”经常被比作相似的方法。
每个方法都有一个类似于“html()”的功能，但是在细节上完全不同，所以使用时需要注意。
html()与text()的区别
让我们先看一下和“text()”方法的区别！
例如我们比较获取一个元素！
<body>
<p>你好</p>
<p>早上好</p>
<script>
const result1 = $('p').html();
const result2 = $('p').text();
console.log( result1 );
console.log( result2 );
</script>
</body>执行结果
你好 你好早上好
在此示例中放置了两个 p 元素。p元素使用“html()和text()”方法获得。
查看结果，我们可以看到一些有趣的特征。"html()" 只获取第一个匹配元素的文本字符，而 "text()" 获取所有匹配元素。“text()”得到的文本是“你好早上好”，得到两个p元素并组合。
另外，如果你使用“text()”添加一个元素呢？
<body>
<div>
<p>早啊</p>
</div>
<script>
$('div').text('<h1>标题</h1>');
</script>
</body>在这种情况下，请注意屏幕上显示的字符。
在使用“html()”的情况下，div的内容被重写为h1元素。但是在使用“text()”的情况下，“<h1>标题</h1>”只是显示为一个字符串！
换句话说，它不被识别为 HTML 元素。
结论：
使用“text()”检索元素会检索所有匹配的元素
如果使用“text()”添加元素，它将作为字符串添加
html()与append()的区别
接下来，我们来对比一下“append()”方法！
首先，决定性的区别在于“append()”没有获取元素的功能。因此，让我们来添加元素进行比较。
示例
<body>
<div>
<p>早啊</p>
</div>
<script>
$('div').html('<p>示例文本</p>');
</script>
</body>执行后的HTML
<div> <p>示例文本</p> </div>
在这个例子中，一个p标签被放置在一个div标签中。如果对这个div标签执行“html()”，div标签的内容会被覆盖，对吧？查看执行后的HTML，可以看到内容已经重写为被指定的p标签。
现在我们用“append()”做同样的事情！
<body>
<div>
<p>早啊</p>
</div>
<script>
$('div').append('<p>示例文本</p>');
</script>
</body>执行后的HTML
<div> <p>早啊</p> <p>示例文本</p> </div>
值得注意的是执行后的HTML！
“html()”是覆盖内容，但“append()”将指定元素放置在原始p标签后面，这是最大的区别。
“append()”是一种将指定元素添加到目标元素末尾的方法。
本文来源：词雅网
本文地址：https://www.ciyawang.com/jquery-html.html
本文使用「 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 」许可协议授权，转载或使用请署名并注明出处。
相关推荐
-
jQuery淡入：提高网站用户体验的利器
在现代Web设计中，用户体验是至关重要的一环。一个好的用户体验能够吸引许多用户，使他们留在你的网站上，而一个糟糕的用户体验则可能导致用户迅速离开你的网站。在这个背景下，jQuery淡入成为了提高网站用...
-
【jQuery入门】总结如何用replace()替换字符串
replace()方法是什么？ 下面就从replace方法的基础知识开始学习吧！replace方法是一种允许您用任何字符替换字符串的方法。 它对一般的字...
-
获取jquery文本表单的输入事件
编写一个示例代码，在jquery的“on”方法中使用“touchmove”获取文本表单的输入事件。获取文本表单的输入事件要获取文本表单的输入事件，请在“on”方法中指定“input”。$('指...
-
详解如何在jQuery选择器中使用正则表达式和属性过滤器
这一次，我们来学习使用正则表达式和属性过滤器来指定 jQuery 选择器的方法！比正则表达式更简单的属性过滤器是什么？让我们从学习属性过滤器开始，它比正则表达式更容易指定选择器！首先，jQuery 选...
-
使用jQuery在指定的html标签中插入html代码
编写一个示例代码，使用jquery的wrapInner()方法在指定的html标签插入插入html代码。在指定的html标签中插入html代码wrapInner()方法可以在指定的html标签插入插入...
-
详解如何使用jQuery的submit()方法提交表单
这次，我们来学习一下“submit()”方法，它可以让你从jQuery中操作Form元素的提交！什么是submit()那么我们先从“submit()”方法的基础知识说起吧！“submit()”是一种允...
-
详解jQuery使用contents()方法获取指定元素的子元素和文本节点
这一次，让我们通过一个示例来了解如何使用 jQuery 的“contents()”方法。 如果只是简单的“选择子元素”，可以在children()方法中使用，但在选择“不...
-
详解jQuery使用.show()/.fadeIn()淡入指定元素
这一次，让我们通过一个示例来解释如何使用jQuery的“.show( )/.fadeIn()”。.show()/.fadeIn() 的作用是什么？.show()/.fadeIn()可以“淡入显示dis...
-
详解jQuery使用fadeTo()方法改变指定元素的透明度
这一次，让我们通过一个示例来解释如何使用 jQuery 的“.fadeTo()”。fadeTo()方法 的功能是什么？fadeTo() 方法是逐渐改变被选元素的不透明度为指定的值（褪色效果）。但是，这...
-
jquery淡出指定元素
使用“fadeOut”淡出指定元素。HTML标签.fadeOut(时间(毫秒))下面是一个示例代码，当单击按钮时，指定元素会在 1 秒内淡出。<!DOCTYPE html> &...
