js动态创建元素和删除

Posted 2020-12-03 其微乐

动态创建元素的三种方式；

一、document.write()；

功能：向body的最后添加一段结构；

参数：字符串；

用法：document.write(‘这是内容<div>这是div</div>‘)；

问题：

1、如果页面加载后使用会导致页面所有内容被覆盖；

2、无法进行指定位置添加元素；

 

二、box.innerhtml = ‘要添加的元素‘;

优点

1、可以指定位置添加元素；

2、创建复杂结构非常方便；换行的话需要进行基本的字符串处理使用转译符；

box.innerHTML = ‘<div><p class="text colorRed"></p></div>

         　　　　　　<div><p class="text fl"></p><span><a href="#">这是a标签</a></span></div>

        　　　　　　 <div><p class="text fl"></p><h4>这是h4</h4></div>

         　　　　　　<div><p class="text fl"></p><span><a href="#">这是a标签</a><h4>这是h4</h4></span></div>

         　　　　　　<div><p class="text colorRed"><span><a href="#">这是a标签</a></span></p></div>‘;

 

缺点；

1、会对原有的元素内部结构进行覆盖； 解决方法是使用  += 可以貌似解决覆盖问题，但只是长得像并不是原来的内部元素；如果被覆盖的事件有事件，那么事件将不复存在；

 

三、createElement创建元素（常用）

用法  ： createElement(‘<div></div>‘);

要结合appendChild() 或 insertBefore();使用

功能：用于创建指定标签

参数：字符串形式的标签名；

特点：使用此方法创建的元素默认不在页面上显示，需要结合元素的移动功能才可以显示；

 

总结：当要创建的结构比较复杂时，用 ：innerHTML;

　　　除了结构复杂的情况外都可以使用document.createElement();

 

四、删除节点

父节点.removeChild(text);