请选择 进入手机版 | 继续访问电脑版
查看: 411|回复: 4

JavaScript insertAdjacentHTML()的使用

  [复制链接]
  • TA的每日心情
    开心
    前天 21:32
  • 签到天数: 1610 天

    [LV.Master]伴坛终老

    4251

    主题

    6177

    帖子

    11万

    积分

    管理员

    IBC编程社区-原道楠

    Rank: 9Rank: 9Rank: 9

    积分
    111382

    推广达人突出贡献优秀版主荣誉管理论坛元老

    发表于 2019-11-8 09:56:57 | 显示全部楼层 |阅读模式

    马上加入IBC,查看更多教程

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    寄义:
    insertAdjacentHTML() 将指定的文本剖析为HTML或XML,并将效果节点插入到DOM树中的指定位置。它不会重新剖析它正在使用的元素,因此它不会粉碎元素内的现有元素。这克制了额外的序列化步调,使其比直接innerHTML操纵更快。 用法:
    1. 1 element.insertAdjacentHTML(position, text);
    复制代码

    名词表明:
        1.element:目的元素;
        2.insert:插入;
        3.Adjacent: 与…毗连的; 相近的;
        4.HTML:各人用的html结构;
        
        text:一段字符串,此方法会将其剖析为节点对象,然后插入目的元素指定位置;
        positon:规定被插入的位置的关键字;

    position有四个参数选项:
        1.beforebegin:规定在目的元素的外部开始位置插入。
        2.afterbegin:规定在目的元素的内部开始位置插入。
        3.beforeend:规定在目的元素的内部竣事位置插入。
        4.afterend:规定在目的元素的外部竣事位置插入。

    弄个图会更清楚点:
    095722zkrzqaqowqddqipa.png




    重点留意:该方法会将指定的文本剖析为HTML或XML(也就是说标签会被剖析)

    实例:
    1. 1  2  3      4          5          6          7             #bluerec { 8                 width:200px; 9                 height:150px;10                 background-color:blue;11             }12             p {13                 width:100px;14                 height:80px;15                 background-color:red;16             }17         18     19      20     
    2. 21         22         
    3. 23         
    4. 24         25         26         36     37
    复制代码

    现实效果:
    095722zyukutskxoghuust.png


    095722g9f1s99l9zn87999.png


    095723woke79uobwk6leaz.png


    对上述代码的剖析:
        1.初始状态:一条分割线、蓝色div、按钮
        2.点击按钮后:在蓝色div上插入了p标签,代替了分割线的位置,分割线位置上移

    使用场景:必要在原有元素附近追加元素时,比起innerHTML服从更高,兼容性更好
    C#论坛 www.ibcibc.com IBC编程社区
    C#
    C#论坛
    IBC编程社区
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则