含义:
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(也就是说标签会被解析)
实例:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 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 </style> 18 </head> 19 <body> 20 <br /> 21 <hr /> 22 <div id = "bluerec"></div> 23 <br /> 24 <input id = "s" type = "button" value = "点击插入"/> 25 26 <script type="text/javascript"> 27 window.onload = function(){ 28 var bluerec = document.getelementbyid("bluerec"); 29 var btn = document.getelementsbytagname("input")[0]; 30 var str = "<p></p>"; 31 btn.onclick = function(){ 32 bluerec.insertadjacenthtml("beforebegin",str); 33 } 34 } 35 </script> 36 </body> 37 </html>
实际效果:
对上述代码的解析:
1.初始状态:一条分割线、蓝色div、按钮
2.点击按钮后:在蓝色div上插入了p标签,取代了分割线的位置,分割线位置上移
使用场景:需要在原有元素周围追加元素时,比起innerhtml效率更高,兼容性更好
如对本文有疑问, 点击进行留言回复!!
elementui更改el-dialog关闭按钮的图标d的示例代码
网友评论