html()方法

本文介绍如何利用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();

截图如下;

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值