jQuery添加dom节点的方法
2023-06-13 09:16:43 时间
一、内部插入DOM:
完整示例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery添加dom节点方法一 -青梅博客</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div class="box">
<span>青梅煮码</span>
</div>
<script type="text/javascript">
//内部前插入
$(".box").prepend("<p>青梅工作室</p>");
//内部后插入
$(".box").append("<p>青梅博客 (www.qmblog.cn)</p>");
</script>
</body>
</html>
jQuery部分:
① 内部前插入DOM (prepend
)
$(".box").prepend("<p>青梅工作室</p>");
② 内部后插入DOM (append
)
$(".box").append("<p>青梅博客</p>");
二、外层插入:
完整示例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery添加dom节点方法二 -青梅博客</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div class="box">
<span>享学独立站</span>
</div>
<script type="text/javascript">
//外层前插入
$(".box").before("<h1>微信公众号:</h1>");
//外层后插入
$(".box").after("<p>关注公众号,关注独立站出海!</p>");
</script>
</body>
</html>
jQuery部分:
① 外层前插入DOM (before
)
$(".box").before("<h1>微信公众号:</h1>");
② 外层后插入DOM (after
)
$(".box").after("<p>关注公众号,关注独立站出海!</p>");
三、元素包裹
完整示例 3:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery添加dom节点方法三 -青梅博客</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div class="box">
<span class="qmzm">青梅博客</span>
</div>
<script type="text/javascript">
//元素包裹
$(".qmzm").wrap("<a href='http://www.qmblog.cn'></a>");
</script>
</body>
</html>
jQuery部分:
元素包裹DOM (wrap
)
$(".qmzm").wrap("<a href='http://www.qmblog.cn'></a>");
相关文章
- JQuery-学习笔记03【基础——DOM操作】「建议收藏」
- jquery判断数组中是否包含某个元素的值_java判断元素是否在数组中
- 生成二维码的 jQuery 插件:jquery.qrcode.js
- jQuery 发布 2.0 版本,不再支持 IE 6/7/8
- jQuery fadeTo()方法的用法
- 让网站动起来!12款优秀的 jQuery 动画插件推荐
- jQuery使用数组编写图片无缝向左滚动
- jQuery用unbind方法去掉hover事件及其他方法介绍
- js和jquery对dom节点的操作(创建/追加)
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- select、radio表单回显功能实现避免使用jquery载入赋值
- jQuery之折叠面板的深入解析
- jquery添加节点的几种方法介绍
- jQuery删除节点的三个方法即remove()detach()和empty()
- jQuery的DOM操作之删除节点示例
- 删除节点的jquery代码
- jquery实现网页查找功能示例分享
- jquery的父子兄弟节点查找示例代码
- jquery如何扑捉回车键触发的事件
- jQuery通过控制节点实现仅在前台通过get方法完成参数传递