qiweile

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

一、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);

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2021-10-17
  • 2022-12-23
  • 2021-12-06
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-01-17
猜你喜欢
  • 2022-12-23
  • 2022-02-07
  • 2022-02-12
  • 2022-12-23
  • 2022-02-09
  • 2022-02-09
相关资源
相似解决方案