html（）方法

最新推荐文章于 2023-06-16 15:43:17 发布

weixin_44540780

最新推荐文章于 2023-06-16 15:43:17 发布

阅读量899

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44540780/article/details/97680691

本文介绍如何利用HTML和jQuery方法更新网页上的元素内容及样式。通过具体实例，展示了如何选取元素、修改HTML内容、应用CSS样式以及插入新元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具与关键技术：mvc

作者：黄志鹏

撰写时间：2019/7/27

接下来我们来说说我们经常用到的html方法，我们取得第一个匹配元素的html内容。html（）方法在W3C里的解释说，这个函数不能用于XML文档。但可以用于XHTML文档。在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。html（）方法主要用于设定HTML内容的值。它的定义和用法是html()
方法返回或设置被选元素的内容(inner HTML)。如果该方法未设置参数，则返回被选元素的当前内容。

接下来我们来看一下代码：

 首先我们先引入插件 <script src="~/jscript/jquery/jquery-3.2.1.min.js"></script>

接下来我们以写一个文本标签P标签为例，

  <p id="pi" style="color:#0094ff;font-size:20px;">你好世界</p>

下面是p标签最原始的样式截图；

在这里插入图片描述

接下来我们写html方法来改变一下这个P标签的样式。首先我们先来获取P标签的ID，

然后我们再来改变p标签里头的文本内容，顺便用CSS方法改变一下P标签的样式；

代码如下，

var $pi = $(’#pi’);

$pi.html(‘这是一个P标签’).css(‘color’, ‘red’);

接下来我们来看看它改变之后的样式：

截图如下：

在这里插入图片描述

接下来我们还可以在这个P标签中插入一些元素，下面我们有写一个方法。接下来我们在P标签中加入一个a标签，让其html内容为"这时一个a标签"，与此同时我们也用CSS方法，

改变一下这个a标签的样式。

代码如下：

window.onload = function () {

     var $pi = $('#pi');

    $pi.append("<a href
  ='#'></a>").children().html("这时一个a标签").css({ 'color': '#000', 'font-size': '30' });

    }

下面是样式截图

在这里插入图片描述

最后我们再来写一个方法改变一下这个p标签的内容。

function ChangeText() {

document.getElementById(“pi”).innerHTML = “New P标签!”;

ChangeText();

截图如下;

在这里插入图片描述