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