JavaScript insertAdjacentHTML()的使用
寄义:insertAdjacentHTML() 将指定的文本剖析为HTML或XML,并将效果节点插入到DOM树中的指定位置。它不会重新剖析它正在使用的元素,因此它不会粉碎元素内的现有元素。这克制了额外的序列化步调,使其比直接innerHTML操纵更快。 用法:
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:规定在目的元素的外部竣事位置插入。
弄个图会更清楚点:
重点留意:该方法会将指定的文本剖析为HTML或XML(也就是说标签会被剖析)
实例:
123 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
21 22
23
24 25 26 36 37
现实效果:
对上述代码的剖析:
1.初始状态:一条分割线、蓝色div、按钮
2.点击按钮后:在蓝色div上插入了p标签,代替了分割线的位置,分割线位置上移
使用场景:必要在原有元素附近追加元素时,比起innerHTML服从更高,兼容性更好
页:
[1]