手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆

测试insertAdjacentHTML

首页 > Javascript >

无它,纯学习的代码,看效果用的。纠结啊,原来好多JS中的方法都没有用过。亏我以前还想转前端:

insertAdjacentText方法,在指定的地方插入html内容和文本内容。
insertAdjacentHTML方法:在指定的地方插入html标签语句

原型:insertAdajcentHTML(swhere,stext)
参数:
swhere: 指定插入html标签语句的地方,有四种值可用:
1.     beforeBegin: 插入到标签开始前
2.     afterBegin:插入到标签开始标记之后
3.     beforeEnd:插入到标签结束标记前
4.     afterEnd:插入到标签结束标记后
stext:要插入的内容

参考:http://blog.csdn.net/helanye/article/details/4496061
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  5.     <title>测试insertAdjacentHTML</title>  
  6.     <script language="javascript"><!--  
  7.     function addsome() {  
  8.         document.getElementById('test').insertAdjacentHTML("afterBegin", "<h1>在文本前容器内插入内容afterBegin</h1>");  
  9.         document.getElementById('test').insertAdjacentHTML("beforeEnd", "<h2>在文本后容器内插入内容beforeEnd</h2>");  
  10.         document.getElementById('test').insertAdjacentHTML("beforeBegin", "<h4>beforeBegin在文本前容器外插入内容</h1>");  
  11.         document.getElementById('test').insertAdjacentHTML("afterEnd", "<h5>afterEnd在文本后容器外插入内容</h2>");  
  12.     }// --></script>  
  13. </head>  
  14. <body onload="addsome()">  
  15. <div id="test">原始内容</div>  
  16. </body>  
  17. </html>  

效果:

FF下无效,IE下有效。webkit下有效。
Over




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

发表评论

评论内容 (必填):