jquery 插入节点
2024-09-04 00:35:06
往某个元素内部的结尾添加
append()
appendTo()
append()
<body>
<button id="bt1">点击通过jQuery的append添加元素</button>
<div class="content"></div> <script type="text/javascript">
$("#bt1").on('click', function() {
//.append(), 内容在方法的后面,
//参数是将要插入的内容。
$(".content").append('<div class="append">通过append方法添加的元素</div>')
})
</script>
</body>
appendTo()
<body>
<button id="bt2">点击通过jQuery的appendTo添加元素</button>
<div class="content"></div>
<script type="text/javascript"> $("#bt2").on('click', function() {
//.appendTo()刚好相反,内容在方法前面,
//无论是一个选择器表达式 或创建作为标记上的标记
//它都将被插入到目标容器的末尾。
$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
}) </script>
</body>
往某个元素的前后添加,被添加元素在前面
before()
after()
before()
<body>
<button id="bt1">点击通过jQuery的before添加元素</button>
<div class="aaron">
<p class="test1">测试before</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//在匹配test1元素集合中的每个元素前面插入p元素
$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
})
</script>
</body>
after()
<body>
<button id="bt2">点击通过jQuery的after添加元素</button>
<div class="aaron">
<p class="test2">测试after</p>
</div>
<script type="text/javascript">
$("#bt2").on('click', function() {
//在匹配test1元素集合中的每个元素后面插入p元素
$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
})
</script>
</body>
往某个元素的前后添加,被添加元素在后面
insertBefore()
insertAfter()
insertBefore()
<body>
<button id="bt1">点击通过jQuery的insertBefore添加元素</button>
<div class="aaron">
<p class="test1">测试insertBefore,不支持多参数</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//在test1元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
})
</script>
</body>
insertAfter()
<body>
<button id="bt2">点击通过jQuery的insertAfter添加元素</button>
<div class="aaron">
<p class="test2">测试insertAfter,不支持多参数</p>
</div>
<script type="text/javascript">
$("#bt2").on('click', function() {
//在test2元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
})
</script>
</body>
往某个元素内部的首位置添加
prepend()
prependTo()
prepend()
<body>
<button id="bt1">点击通过jQuery的prepend添加元素</button>
<div class="aaron1">
<p>测试prepend</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//在aaron1的首位置添加一个新的p节点,跟append位置相反
$('.aaron1').prepend('<p>prepend增加的p元素</p>')
})
</script>
</body>
prependTo()
<body>
<div class="aaron2">
<p>测试prependTo</p>
</div>
<script type="text/javascript">
$("#bt2").on('click', function() {
//找到class="aaron2"的div节点
//然后通过prependTo内部的首位置添加一个新的p节点
$('<p>prependTo增加的p元素</p>').prependTo($('.aaron2'))
})
</script>
</body>
最新文章
- 一篇对iOS音频比较完善的文章
- centos7 升级内核到最新版本
- 机器学习基石--学习笔记02--Hard Dual SVM
- Java编程思想学习(十四) 枚举
- JavaScript高级程序设计19.pdf
- Android Paint之 setXfermode PorterDuffXfermode 讲解
- poi2007
- 【Luogu1337】平衡点(模拟退火)
- Android Studio使用过程中遇到的错误
- Entity FrameWork 增删改查
- jQuery.Deferred exception: $.get is not a function TypeError: $.get is not a function
- Compoxure example 应用说明
- java 图片与文字生成PDF
- 0<;Double.MIN_VALUE
- Android Dialog的整个生命周期
- PLSQL函数,存储过程
- div盒子的居中
- 20155320 2016-2017-2 《Java程序设计》第二周学习总结
- “全栈2019”Java第十五章:Unicode与转义字符
- 数据类型之Nullable
热门文章
- EF Core使用遇到的问题
- jsp标签${fn:contains()}遇到问题记录
- ros 源码安装
- MyBatis踩坑之SQLProvider转义字符被删除问题
- 【npm permission denied错误】npm ERR! Error: EACCES: permission denied, access
- adb 命令简介
- 【maven学习】构建maven web项目
- [ARM-Linux开发] 嵌入式 linux如何生成ko文件
- 【ztree】获取根节点
- js中常见的字符串方法(3)