添加标签

开发工具与关键技术：VS    jQuery
作者：宋永烨
撰写时间：2019/4/8

一般情况下,添加标签有两种,一种是手动添加后可以删除的,通过DOM节点,另一种一般是直接加入到页面且不能删除,通过字符串拼接 加jQuery的html方法实现,本文通过for循环让它实现类似于DOM节点插入方法的效果,由于 jQuery的html方法 本身方法与本人实力的限制,无法解决jQuery的html方法重复调用后会覆盖上一次输入的数据.
一.HTML代码部分

1.创建一个div用于存放将要添加的input标签
2.创建两个用于触发添加与删除所有的button按钮
3.最好添加ID为了便于添加方法
4.按钮禁止放在div中,否则在添加input标签后会被覆盖掉

二.JS代码部分的思路

1. 想要通过html方法向div标签添加元素,首先找到它,通过ID
2. 找到后向它里面添加一个input标签格式的字符串
3. 由于直接添加无法删除,于是将需要添加的字符串赋值给一个变量,再将变量通过html方法添加入ID为div的标签,通过改变变量即可改变添加的字符串
4. 当需要添加多个标签时,将变量加等字符串可以实现,但删除时只能清空无法做到DOM节点那种单独删除一个的效果
5. 于是使用for循环,在input标签格式的字符串中添加一个自定义属性,并赋值为for循环的迭代变量
6. 添加一个button按钮格式的字符串,绑定一个点击事件,传两个参,一个this关键字,一个for循环的迭代变量,文本值为 删除
7. 由于for循环需要一个参数去决定循环的次数,所以创建一个用于记录到底添加了几个input标签的变量(最好设置为全局变量),每当添加一个input标签他就自增1即可
8. 循环结束后将变量添加到 ID为div的标签 中,并将它与for循环封装进一个方法并将它与添加按钮的点击事件绑定,添加就完成了
9. 写一个创建的删除按钮的绑定的点击事件(记得引入两个参数,不然会报错),下图中存在一个错误(删除按钮的绑定的点击事件必须放在页面加载事件外面,否则调用不到,下图只是为了方便截图后的手残操作),然后让记录添加的input标签的个数(或长度)的变量减一即可
10. 删除方法用的是remove 一个jQuery封装的方法,本来想用通过给选中的元素通过html赋一个空值来达到删除目的,但它只能删子元素,删不了自己
    
11. 虽然在一堆同级元素中删除单个元素html方法不好做到,但可以通过选中需要删除的元素的父级元素的方法来到达删除所有元素的目的
12. 首先创建一个值为空的字符串类型的变量,然后通过html方法将它赋值给想删除的元素的父级元素即可,(下图方法与上图方法均可),然后将代表创建的input标签长度的变量赋值为零(否则下一次添加的长度会在原基础上再加一)
    

以上就是本文的全部内容,添加一个标签,但其实通过DOM节点添加会快很多,只是这样写也可以,这只是思路的一种,

本文纯原创,如有错漏,请指正