DOM操作之--元素的创建,添加,删除

作者：你好赵伟 | 2024-03-05 11:48:48

踩

document.body.appendchild removechild

在页面创建元素

 
   var 
    t1  
   = 
    document.createElement( 
   "h1" 
   ); 
  
 
   t1.textContent  
   = 
     
   "这是通过js设置的标题" 
   ; 
  

 
   document.body.appendChild(t1); 
  

// createElement创建一个元素对象，参数是要创建的元素名字，返回值是创建的元素对象

// 元素对象，appendChild方法表示为这个元素添加一个子元素，参数是要添加的子元素对象，被添加的子元素会排列在最后

创建ul与li

 
   var 
    ul  
   = 
    document.getElementById( 
   "list" 
   ); 
  

 
   var 
    l1  
   = 
    document.createElement( 
   "li" 
   ); 
  
   l1.textContent  
   = 
     
   "这里添加一个li" 
   ; 
  
   ul.appendChild(l1);

插入元素

 
   // 为元素对象添加一个子元素，插入到另一个元素之前，第一个参数表示要添加的元素对象，第二个元素表示添加在谁之前 
  
   ul.insertBefore(li, li2);

删除元素

 
   // 元素对象.remove方法：从DOM对象中删除这个元素 
  
   // ul.remove(); 
  
   // 删除元素对象的某个子元素 
  
   document.body.removeChild(ul);

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/190812