<script>
var target = [];
target [0] = "aaa000";
target [1] = "bbb111";
target [2] = "ccc222";
target [3] = "ddd333";
target [4] = "eee444";
target [5] = "fff555";
console.log("使用push()添加元素之前长度:"+target.length);
target.push("ggg666");
console.log("使用push()添加元素之后长度:"+target.length);
console.log(target[6]);
var local = $.inArray("ccc222", target);
target.splice(local,1);
console.log("使用splice()删除1个元素之后长度:" + target.length);
</script>
效果图
![](https://img2018.cnblogs.com/blog/1234831/201904/1234831-20190429163628378-1659643279.png)
可以用作动态添加标签,以及删除标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.baseDiv {
height : 1%;
width : 100%;
background-color : aqua;
}
.newDiv {
height : 1%;
width : 100%;
background-color : yellow;
margin-top : 1%;
cursor : pointer;
}
</style>
<body>
<input id="target" type="text" style="width:100%;">
<button id="addDiv">添加div元素到baseDiv</button>
<div id="baseDiv" class="baseDiv">
<p>这里一个名为baseDiv的div</p>
<p>这是一个段落。</p>
</div>
<br>
<button id="removebaseDiv" >移除baseDiv</button>
<script>
var num = 1;
var target = [];
$(function(){
$('#addDiv').bind('click', function(event) {
$("<div id='div"+ num +"' onclick='removeDiv(this)' class='newDiv'>这是新增的div"+ num +",点击可以删除</div>").appendTo("#baseDiv");
target.push("这是新增的div"+num+",点击可以删除");
$('#target').val(target);
num++;
});
})
$(function(){
$('#removebaseDiv').bind('click', function(event) {
$('#baseDiv').remove();
});
})
function removeDiv(node) {
var content = $('#'+node.id+'').text();
var local = $.inArray(content, target);
target.splice(local,1);
$('#target').val(target);
$('#'+node.id+'').remove();
}
</script>
</body>
</html>
效果图
![](https://img2018.cnblogs.com/blog/1234831/201904/1234831-20190429162412235-1966033748.png)
连续多次点击添加div元素到baseDiv
按钮
![](https://img2018.cnblogs.com/blog/1234831/201904/1234831-20190429162454744-396952717.png)
点击这是新增的div3,点击可以删除
![](https://img2018.cnblogs.com/blog/1234831/201904/1234831-20190429162535508-1145320574.png)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· 趁着过年的时候手搓了一个低代码框架
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现