JavaScript的学习之创建、添加标签控件

今天写网络前端训练营的时候，要求动态显示界面中卡片(各种组合起来的标签)的个数，于是百度学习了下。

js有两种创建方法，第一种是在innerHTML中直接写,第二种是创建标签然后插入到网页中。

第一种：

var div_1 = document.createElement('div');

div_1 .innerHTML+="<a class=\"a_1\">我是一个A标签</a>";

这种方法书写困难，还要给双引号写转义符，各种麻烦。所以我肯定不会用这种。

第二种：

var div_1 = document.createElement('div');

这就创建好了，显示的话需要插入父容器(标签)内。

paent.appendChild(div_1);

这就添加到父容器(标签)内尾部位置。创建添加完毕。

 

div_1.setAttribute('class', className);

 

PS：setAttribute()是一个设置属性的方法，这里设置是claas 的名字 id、value、href等标签内的属性都可以设置。

append(),父级最后追加一个子元素

appendTo(),将子元素追加到父级的最后

appendChild(),在节点的最后追加子元素

prepend(),在父级最前面追加一个子元素

prependTo(),将子元素追加到父级的最前面

after(),在当前元素之后追加（是同级关系）

before(),在当前元素之前追加（是同级关系）

insertAfter(),将元素追加到指定对象的后面（是同级关系）

 

$('.name').append()可以使用

其他没试验过。