• 技术文章 >web前端 >js教程

    Javascript中如何对DOM元素的添加

    逆旅行人逆旅行人2021-04-08 16:20:46原创109

    2021040815554713126.jpg

    HTML内容为空

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>php.cn</title>
    </head>
    <body>
    </body>
    </html>

    1.创建DOM元素

     <script>     
           const ul=document.createElement("ul");
     </script>

    2.在DOM中添加内容

      <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>
     <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>

    推荐:《2021年js面试题及答案(大汇总)

    以上就是Javascript中如何对DOM元素的添加的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    上一篇:浏览器不支持javascript怎么办 下一篇:javascript怎么将日期时间转为时间戳
    第15期线上培训班

    相关文章推荐

    • 详解DOM元素和事件• 如何利用传统的方式在HTML中获取DOM元素• 如何更加优雅的从HTML中获取DOM元素• 如何在JS中改变DOM元素的文本内容• JavaScript怎么获取DOM元素

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网