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

    如何利用Javascript在标签内外插入标签元素

    逆旅行人逆旅行人2021-04-08 17:26:25原创134

    2021040816433548356.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></title>
    </head>
    <body>
    </body>
    </html>

    1.在HTML中添加元素

     <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);
    </script>

    2.插入在标签内部

             li= document.createElement("li");
             li.textContent="第一个元素";
            ul.insertAdjacentElement("afterbegin",li);
    
             li= document.createElement("li");
             li.textContent="最后一个元素";
             ul.insertAdjacentElement("beforeend",li);

    3.插入在标签外部

             a=document.createElement("a");
             a.innerText="《雪中悍刀行》";
             a.href="http://www.baidu.com";
             ul.insertAdjacentElement("beforebegin",a);
    
             a1=document.createElement("a");
             a1.innerText="《剑来》";
             a1.href="https://www.php.cn/";
             ul.insertAdjacentElement("afterend",a1);

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

    以上就是如何利用Javascript在标签内外插入标签元素的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:Javasript 标签 DOM元素
    上一篇:怎么运行javascript脚本 下一篇:javascript如何删除对象属性
    第15期线上培训班

    相关文章推荐

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

    全部评论我要评论

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

    PHP中文网