jQuery操作HTML代码方法介绍
更新时间：2022年05月04日 11:40:17 作者：.NET开发菜鸟
这篇文章介绍了jQuery操作HTML代码的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
html()可以对HTML代码进行操作，类似于元素JavaScript中的innerHTML。
例如：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>html()操作</title>
<style>
*{
margin: 0px;
padding: 0px;
}
input{
display: block;
float: left;
}
</style>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
$("#btnGet").click(function(){
var html=$("div.left").html();
alert(html);
});
$("#btnSet").click(function(){
var html=$("div.left").html("<div style='border:1px solid red;'><p>这是一个段落</p></div>");
});
});
</script>
</head>
<body>
<div id="mainbox">
<h1>飘飞雨絮</h1>
<div class="left">
<img src="../qq.jpg" width="150" height="150"/>
<br />
</div>
</div>
<input type="button" id="btnGet" value="获取html()内容" style="margin-right:10px;" />
<input type="button" id="btnSet" value="单击改变内容" />
</body>
</html>效果：
到此这篇关于jQuery操作HTML代码的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Jquery 获取相同NAME 或者id删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
下面小编就为大家带来一篇domReady的实现案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
本篇文章主要介绍了jQuery中Nicescroll滚动条插件的用法，Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件，有需要的可以了解下。2016-11-11
Jquery选择子控件”>“：在给定的父元素下匹配所有的子元素；另一个就是在给定的祖先元素下匹配所有的后代元素，具体概述及使用示例如下，感兴趣的朋友可以参考下哈2013-06-06
这篇文章主要介绍了jQuery中width()方法用法,以实例形式较为详细的分析了width()方法获取元素宽度的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
Jquery attr("checked") 返回checked或undefined 获取选中失效
$('#cb').attr('checked'); 返回的是checked或者是undefined，不是原来的true和false了，有关此问题的解决方法如下，感兴趣的朋友可以参考下2013-10-10
鼠标在搜索框中点击的时候里面的文字就消失了，经常会用到搜索框的获得焦点和失去焦点的事件，接下来介绍一下具体代码，感兴趣的朋友额可以参考下2013-04-04
这篇文章主要介绍了jQuery animate easing使用方法详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
本篇文章主要是对jQuery 无限级菜单的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
从jQuery 1.4.3起， HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。也就是说虽然 data-* 是在html5 中的元素, 但是如果使用 jquery 1.4.3库以上的.还是可以 在非HTML5的页面或浏览器里, 仍然可以使用.data(obj)方法来操作"data-*" 数据.2014-08-08
最新评论