insertAdjacentHTML和 insertAdjacentText这两个方法很灵活,可以在指定的地方插入html内容和文本内容,在大部分情况下比element.innerHTML的性能更好,比Document Fragments更好的HTML文档插入方案,因为我们知道Document Fragments在某些IE版本中的表现不好。
insertAdjacentText方法与 insertAdjacentHTML方法类似,只不过只能插入纯文本,参数相同。
insertAdjacentHTML和insertAdjacentText方法:
IE的DHTML对象提供了四个可读写的属性来动态操作页面元素的内容:innerText, outerText, innerHTML, outerHTML.
需注意两点:
1. 其中innerText,outerText属性的值是作为普通文本呈现的,即使它含有HTML标签也如实反应出来;而innerHTML, outerHTML呈现的是经HTML引擎解析后文本,它可以反应属性中HTML标签的表现效果。
2. 对对象的outerText,outerHTML属性赋值(即写操作)会删除该对象。
以上四个属性的赋值操作只是替换原对象的文本内容,想要在页面中指定元素相关位置新增文本内容,需采用insertAdjacentHTML和insertAdjacentText方法。形式如下:
object.insertAdjacentText(sWhere, sText)
object.insertAdjacentHTML(sWhere, sText)
其中 sWhere 表示插入的文本相对于html标签的位置,有如下四个预设值:
beforeBegin,afterBegin,beforeEnd,afterEnd
使用中需注意如下几点:
1.这两种方法必须在整个文档装载完成之后才能使用,否则将出错。
2. InsertAdjacentText只能插入普通文本,InsertAdjacentHTML插入html格式的文本
3. 用InsertAdjacentHTML插入脚本,必须在script元素中使用defer属性,否则脚本执行将出现运行期错误
4.InsertAdjacentHTML插入html元素后,all以及其他可能的元素集合将自动更新以反应动态变化。如页面后续元素的sourceIndex 属性将改变。
5.当赋予InsertHTML/outerHTML属性无效的HTML标签,该方法可能出现运行时错。如以下代码将出错:
<BODY> <p id=pdiv></p> <SCRIPT LANGUAGE=javascript> pdiv.innerHTML = <p>hello</p> </SCRIPT> </BODY>
1.只有文档BODY内显示的内容能被以上属性和方法动态改变,BODY对象的内容能被动态操作,但BODY对象本身无法被替换。
2.以上属性和方式不能操作空标签(没有内容的html标签),如input,img。
3.对于table对象而言,只有td(innerHTML/innerText)和table(outerHMTL/outerText)对象可以用某些属性来替换或插入内容;而其他table对象,如tr、tbody不能用这些属性来改变内容。
添加HTML内容与文本内容以前用的是innerHTML与innerText方法,最近发现还有insertAdjacentHTML和 insertAdjacentText方法,这两个方法更灵活,可以在指定的地方插入html内容和文本内容。insertAdjacentHTML方法:在指定的地方插入html标签语句
.insertadjacenthtml()方法具体怎么使用?
原型:insertAdajcentHTML(swhere,stext)
Element.insertAdjacentHTML方法解析HTML字符串,然后将生成的节点插入DOM树的指定位置。
element.insertAdjacentHTML(position, text);
该方法接受两个参数,第一个是指定位置,第二个是待解析的字符串。
参数:
swhere: 指定插入html标签语句的地方,有四种值可用:
1. beforeBegin: 插入到标签开始前
// 原来的HTML代码:<div id=one>one</div> var d1 = document.getElementById('one'); d1.insertAdjacentHTML('afterend', '<div id=two>two</div>'); // 现在的HTML代码: // <div id=one>one</div><div id=two>two</div>
注意:该方法不是彻底置换现有的DOM结构,这使得它的执行速度比innerHTML操作快得多。
stext:要插入的内容
<html> <head> <script language=javascript> function myfun() { var obj = document.getElementById(btn1); obj.insertAdjacentHTML(afterEnd,<br><input name=/txt1/>); } </script> </head> <body> <input name=txt> <input id=btn1 name=btn1 type=button value=更多... onclick=myfun()> </body> </html>
=============================
<head> <title>24.htm insertAdjacentHTML插入新内容</title> <script language=jscript> function addsome() { document.all.paral.insertAdjacentHTML(afterBegin,<h1>在文本前容器内插入内容</h1>); document.all.paral.insertAdjacentHTML(beforeEnd,<h2>在文本后容器内插入内容</h2>); document.all.paral.insertAdjacentHTML(beforeBegin,<h4>在文本前容器外插入内容</h1>); document.all.paral.insertAdjacentHTML(afterEnd,<h5>在文本后容器外插入内容</h2>); } </script> </head> <body onload=addsome()> <div id=paral style=fontsize:6;color=’#ff00ff’>原来的内容</div><hr> </body> </html>
=================================
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN> <HTML> <HEAD> <TITLE> New Document </TITLE> <Meta NAME=Generator CONTENT=EditPlus> <Meta NAME=Author CONTENT=> <Meta NAME=Keywords CONTENT=> <Meta NAME=Description CONTENT=> </HEAD><BODY> <script> var num=0; var No_sys=0;function Add_button(){ if(No_sys<8){ c_input.insertAdjacentHTML(beforeEnd,<div id=/bar+num+/ oncontextmenu=/Remove_button(bar+num+);return false/ style=/background:red;width:40;height:20/>+num+</div>); num++; No_sys++; } }function Remove_button(obj){ obj.removeNode(true); No_sys--; } </script> <input type=button onclick=Add_button() value=动态加> <input type=button onclick=alert(c_input.innerHTML) value=看> <div id=c_input> </div> </BODY> </HTML>
用法:
<div id=test> <span style=color:red>test1</span> test2 </div>
在JS中可以使用:
test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是
“<span style=color:red>test1</span> test2 ”
test.innerText:
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。
test.outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是
<div id=test><span style=color:red>test1</span> test2</div>
完整示例:
<div id=test> <span style=color:red>test1</span> test2 </div> <a href=javascript:alert(test.innerHTML)>innerHTML内容</a> <a href=javascript:alert(test.innerText)>inerHTML内容</a> <a href=javascript:alert(test.outerHTML)>outerHTML内容</a>
特别说明:
innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href=javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))>无HTML,符合W3C标准</a>
原文地址:https://www.jb51.cc/html/1207806.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。