在前端开发中,使用jquery动态添加或删除页面元素是一种非常常见的需求。本文将介绍如何使用jquery实现在页面中动态添加或删除div内容的功能。
一、添加div内容
添加div内容最基本的方法是使用jQuery的append方法。该方法可以在已有的元素末尾添加一个新元素。
示例代码如下:
$(document).ready(function() {
$("#addBtn").click(function() {
$("#myDiv").append("这是新的一行内容。
")
});
});在以上示例代码中,通过点击一个按钮触发事件,向id为"myDiv"的元素末尾添加一行新的p元素。这个p元素包含了需要添加的内容,可以是任何html标签和文本。
如果需要添加多行内容,可以将上述示例代码的append方法中的内容改为需要添加的html代码。还可以利用循环来重复添加相同的内容,例如:
$(document).ready(function() {
$("#addBtn").click(function() {
for(var i = 0; i < 5; i++) {
$("#myDiv").append("这是新的一行内容。
");
}
});
});在以上示例代码中,点击按钮将向id为"myDiv"的元素末尾添加5行新的p元素,每行包含相同的html代码。
二、删除div内容
传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目,如果修改栏目,需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML,安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据,安装时可选择演示安装或全新安装。如果全新安装,后台内容充实后,首页才能完全显示出来。(全新安装后可以删除演示数据用到的图片,目录在https://
使用jQuery删除div内容的方法也很简单,可以使用remove或empty方法。
- remove方法
remove方法可以删除选定的元素及其所有子元素。示例代码如下:
$(document).ready(function() {
$("#removeBtn").click(function() {
$("#myDiv").remove();
});
});在以上示例代码中,点击按钮将删除id为"myDiv"的元素及其所有子元素。
- empty方法
empty方法可以删除选定元素的所有子元素,但保留选定元素本身。示例代码如下:
$(document).ready(function() {
$("#emptyBtn").click(function() {
$("#myDiv").empty();
});
});在以上示例代码中,点击按钮将保留id为"myDiv"的元素本身,但删除该元素的所有子元素。
三、总结
通过上述介绍,我们可以看到使用jQuery动态添加或删除div内容非常简单。只需使用append方法添加内容,使用remove或empty方法删除内容即可。在实际项目中,这个功能通常用于动态展示数据、增删表单项等。开发人员可以根据不同需求来对这个功能进行更多的使用和调整。









