Javascript中如何对DOM元素的添加(2)-木庄网络博客

2022-02-18 05:37:54 PHP中文网 JavaScript 百度已收录

2.在DOM中添加内容

append()在被选元素的结尾插入指定内容

<script>     
      const ul=document.createElement("ul");
       for(let i=1;i<=5;i++){
           const li=document.createElement("li");
           li.textContent=`item${i}`;
           ul.append(li);
       }
         document.body.append(ul);
</script>

prepend()在被选元素头部添加指定内容

<script> 
       //append()创建一个列表
       const ul=document.createElement("ul");
       //循环来生成多个列表li
       for(let i=1;i<=5;i++){
           const li=document.createElement("li");
           li.textContent=`item${i}`;
           ul.append(li);
       }
        
       console.log(ul);
        
       //prepend()在头部添加li
       li=document.createElement("li");
       li.textContent="first item";
       li.style.color="red";
       ul.prepend(li);
       document.body.append(ul);
 </script>