JQuery实现动态插入HTML模块

在项目中经常会遇到需要动态生成某个模块并将其插入到原有的HTML页面中，那么我就将我所知道的方法总结如下：
选择器选择的都是父级，添加到父级里
append：$("#wrap").append(“

啦啦啦
“); 添加到父级中所有子元素的最前面
appendto: ( " 啦啦啦 " ) . a p p e n d T o ( ("啦啦啦 ").appendTo( ("啦啦啦").appendTo((”#wrap”)); 添加到父级中所有子元素的最前面

prepend: $("#wrap").prepend(“

啦啦啦
“); 添加到父级中所有子元素的最前面
prependto: ( " 啦啦啦 " ) . p r e p e n d T o ( ("啦啦啦 ").prependTo( ("啦啦啦").prependTo((”#wrap”)); 添加到父级中所有子元素的最前面

添加到与父级同级
after: $("#wrap").after(“

啦啦啦
“); 添加到当前选择的父级元素前面
insertafter: ( " 啦啦啦 " ) . i n s e r t A f t e r ( ("啦啦啦 ").insertAfter( ("啦啦啦").insertAfter((”#wrap”)); 添加到当前选择的父级元素前面

before: $("#wrap").before(“

啦啦啦
“); 添加到当前选择的父级元素后面
insertbefore: ( " 啦啦啦 " ) . i n s e r t B e f o r e ( ("啦啦啦 ").insertBefore( ("啦啦啦").insertBefore((”#wrap”)); 添加到当前选择的父级元素后面

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>js中常用追加元素的几种方法</title><!--<link rel="stylesheet" href="css/rest.css" />--><style>.container {width: 1200px;padding: 10px;margin: 50px auto;border: 1px solid lightcoral;}#wrap{border: 1px solid lightseagreen;margin-top: 20px;margin-bottom: 20px;}.container p{height: 30px;line-height: 30px;}.btn-group{margin-top: 20px;}button{width: 80px;height: 32px;margin-right: 10px;line-height: 32px;text-align: center;border: 0px;}.test{width: 300px;height: 200px;border: 1px salmon solid;}</style>
</head>
<body>
<div class="container"><div class="test"></div><div id="wrap"><p class="first">我是第一个子元素</p><p class="second">我是第二个子元素</p></div><div class="test"></div><div class="btn-group"><button class="append">append</button><button class="appendTo">appendTo</button><button class="prepend">prepend</button><button class="prependTo">prependTo</button><button class="after">after</button><button class="insertAfter">insertAfter</button><button class="before">before</button><button class="insertBefore">insertBefore</button></div></div></body>
</html>
<script src="../js/jquery-3.2.1.js"></script>
<script>var i = 0;$(function(){//append(),在父级最后追加一个子元素$(".append").click(function(){$("#wrap").append("<p class='three'>我是子元素append"+i+"</p>");i++;});//appendTo(),将子元素追加到父级的最后$(".appendTo").click(function(){$("<p class='three'>我是子元素appendTo"+i+"</p>").appendTo($("#wrap"));i++;});//prepend(),在父级最前面追加一个子元素$(".prepend").click(function(){$("#wrap").prepend("<p class='three'>我是子元素prepend"+i+"</p>");i++;});//prependTo(),将子元素追加到父级的最前面$(".prependTo").click(function(){$("<p class='three'>我是子元素prependTo"+i+"</p>").prependTo($("#wrap"));i++;});//after(),在当前元素之后追加（是同级关系）$(".after").click(function(){$("#wrap").after("<p class='siblings'>我是同级元素after"+i+"</p>");i++;});//before(),在当前元素之前追加（是同级关系）$(".before").click(function(){$("#wrap").before("<p class='siblings'>我是同级元素before"+i+"</p>");i++;});//insertAfter(),将元素追加到指定对象的后面（是同级关系）$(".insertAfter").click(function(){$("<p class='three'>我是同级元素insertAfter"+i+"</p>").insertAfter($("#wrap"));i++;});//insertBefore(),将元素追加到指定对象的前面（是同级关系）$(".insertBefore").click(function(){$("<p class='three'>我是同级元素insertBefore"+i+"</p>").insertBefore($("#wrap"));i++;});});</script>

转自：https://blog.csdn.net/Immortal_W/article/details/86565060

JQuery实现动态插入HTML模块相关推荐

jquery动态插入行，不用拼写html，简洁版
这个一个利用jquery实现动态插入输入行效果小功能,不用在javascript里拼写html字符串,更简洁.高效. html代码: <div class="fitem"&g ...
JQuery之向标签动态插入html
本文介绍了向标签中动态插入html分为向标签内部.外部插入,此外还有替换标签内部原来的html内容. 快捷导航,点击快速查看 ①prepend();(标签内.文首插入) ②append(); (标签内 ...
动态引入js只能生效一次_干货丨动态插入的script脚本执行时间
在一些场景我们会动态插入script标签加载js. 譬如某个js文件不是很重要,并不是整个页面需要的脚本,可能只是某个功能需要的,这个功能可能是用户点击了某个按钮才触发,入口比较深.且和你页面本身的结 ...
动态引入js只能生效一次_动态插入的script脚本执行时间
在一些场景我们会动态插入script标签加载js. 譬如某个js文件不是很重要,并不是整个页面需要的脚本,可能只是某个功能需要的,这个功能可能是用户点击了某个按钮才触发,入口比较深.且和你页面本身的结 ...
4.3.3 用jQuery获取动态数据
4.3.3 用jQuery获取动态数据 2008-09-28 16:09 (英)格雷恩(Granc,D.)等著/贺师俊等译人民邮电出版社我要评论(0) 字号:T | T 综合评级: 想读(1) ...
Java实现pdf和Excel的生成及数据动态插入、导出
点击上方蓝色"方志朋",选择"设为星标"回复"666"获取独家整理的学习资料! 作者:慢时光 cnblogs.com/Tom-shushu/ ...
go加载python_人生苦短我用python（02）动态加载模块-Go语言中文社区
文章内容为原创,欢迎转载请注明出处作者: EflyPro->晦明禅师文章来源:公众号"睿江云计算" 继第一期[人生苦短我用Python系列专栏]发布后,深受广大睿普迷的一 ...
linux内核采取,采用动态加载模块的方式Linux内核编译
Linux内核是一种单体内核,但是通过动态加载模块的方式,使它的开发非常灵活方便.那么,它是如何编译内核的呢?我们可以通过分析它的Makefile入手.以下是一个简单的hello内核模块的Makefi ...
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

JQuery实现动态插入HTML模块

JQuery实现动态插入HTML模块相关推荐

最新文章

热门文章