搜 索

jQuery代码动态添加新的html元素内容

编辑:QTOOL.NET日期:2019-04-06311

今天分享一下怎样使用jquery代码动态添加新的html元素。
通过jQuery,我们可以很方便的添加新html元素与内容
首先我们需要先要引用jQuery框架.
然后我们就可以使用jQuery代码对html元素进行添加了.
在制作网页过程中想要通过jquery添加新的div标签元素一般经常用到的有用到append、prepend、after、before这几个方法.
1、在指定的父系div元素结尾插入新的内容
append()方法
$("#neirong").append("添加的新内容文本");
2、在指定的父系元素开头添加新的元素内容
prepend()方法
$("#neirong").prepend("添加的新内容文本");
3、在指定的同级元素之后别添加新的内容
after()方法 
$("#neirong").after("添加的新内容文本");
4、在指定的同级别的元素标签之前插入新的元素
before()方法
$("#neirong").before("添加的新内容文本");
 
以上为单个添加新元素代码,那么怎样实现点击按钮无限的自动新增新html元素呢
代码如下:
<script type="text/javascript">
function Addto(){
var nr="这是一个新的div标签";               // 添加新文本
var nr2="<div class=\"list\">列表中的内容</div>";   // 添加新元素
$("#neirong").append(nr,nr2);         // 新元素
}
</script>
调用方法:
<div id="neirong"></div>
<button onClick="Addto();">添加</button>
将只需要点击添加按钮控件,即可实现添加新的div标签.

TAG标签:jsjQuery
此文章由QTOOL.NET编辑
最新文章

热门标签