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标签语句
原型：insertAdajcentHTML(swhere,stext)
参数：
swhere: 指定插入html标签语句的地方，有四种值可用：
1. beforeBegin: 插入到标签开始前
2. afterBegin:插入到标签开始标记之后
3. beforeEnd:插入到标签结束标记前
4. afterEnd:插入到标签结束标记后
stext：要插入的内容
<head>
<script language="javascript">
function myfun()
{
var obj = document.getElementByIdx_x_x("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>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<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>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
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>
<span
style="color:red">test1</span>
test2
</div>
在JS中可以使用：
test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<span
style="color:red">test1</span>
test2 ”。
test.innerText:
从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。
test.outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是<div
id="test"><span
style="color:red">test1</span>
test2</div>
完整示例：
<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标准的示例：
href="javascript:alert(document.getElementByIdx_x_x('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
insertAdjacentHTML和insertAdjacentText方法的更多相关文章
- insertAdjacentHTML和insertAdjacentText的使用（在指定位置插入代码或者文字）
insertAdjacentText方法与insertAdjacentHTML方法类似,只不过只能插入纯文本,参数相同.
- insertAdjacentHTML方法示例
添加HTML内容与文本内容以前用的是innerHTML与innerText方法,最近发现还有insertAdjacentHTML和insertAdjacentText方法,这两个方法更灵活,可以在指定 ...
- 修改html很实用的insertAdjacentHTML方法
添加HTML内容与文本内容以前用的是innerHTML与innerText方法, 最近发现还有insertAdjacentHTML和 insertAdjacentText方法, 这两个方法更灵活,可以 ...
- insertAdjacentHTML方法详解
添加HTML内容与文本内容以前用的是innerHTML与innerText方法, 最近发现还有insertAdjacentHTML和 insertAdjacentText方法, 这两个方法更灵活,可以 ...
- JS insertAdajcentHTML 方法简介
修改节点的内容除了常用的innerHTML和innerText之外,还有insertAdjacentHTML和insertAdjacentText方法,可以在指定的地方插入内容.insertAdjac ...
- javascript DOM操作中的insertAdjacentHTML方法
插入HTML内容与文本内容以前用的是innerHTML与innerText方法,今天看到insertAdjacentHTML和 insertAdjacentText两个API,特地学习一下: inse ...
- WebBrowser常用属性方法介绍
WebBrowser 常用属性方法 ■■方法 ============================== ▲GoBack 相当于IE的"后退"按钮,使你在当前历史列表中后 ...
- before(),after(),prepend(),append()等新DOM方法简介
一.DOM API也在不断升级 web前端标准一直在不断升级,比方说,说了很多年的HTML5.CSS3,以及天天见的ES6. 然后,似乎就没有然后了.实际上,除了HTML5/CSS3/ES6+,关于D ...
- DOM、BOM 操作超级集合
本章内容: 定义 节点类型 节点关系 选择器 样式操作方法style 表格操作方法 表单操作方法 元素节点ELEMENT 属性节点attributes 文本节点TEXT 文档节点 Document 位 ...
随机推荐
- Hadoop中操作HDFS出现异常的解决方法
Hadoop环境搭建成功后,一般会运行一个小例子,这时候就涉及到了对HDFS文件系统的操作,对于刚开始学习Hadoop的初学者一般会多次的进行name节点的格式化操作,最后导致上传文件会抛出异常,通过 ...
- 【贪心】最大乘积-贪心-高精度-java
问题 G: [贪心]最大乘积 时间限制: 1 Sec 内存限制: 128 MB提交: 34 解决: 10[提交][状态][讨论版] 题目描述 一个正整数一般可以分为几个互不相同的自然数的和,如3 ...
- BestCoder11(Div2) 1003 Boring count (hdu 5056) 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5056 题目意思:给出一条只有小写字母组成的序列S,问当中可以组成多少条每个字母出现的次数 <= ...
- ubuntu命令行相关命令使用心得
一.Ubuntu解压缩zip,tar,tar.gz,tar.bz2 ZIP zip可能是目前使用得最多的文档压缩格式.它最大的优点就是在不同的操作系统平台,比如Linux, Windows以及Mac ...
- Material Design风格登录注册
本文实现了以下功能 完整的代码和样例托管在Github 当接口锁定时,防止后退按钮显示在登录Activity 上. 自定义 ProgressDialog来显示加载的状态. 符合材料设计规范. 悬浮标签 ...
- RedHat6.2 下RRDTool安装方法
在安装ganglia的时候,需要安装ttdtol, 否则是不运去安装的.查可很多,这个可以. 我的环境: [hadoop@host8 ~]$ lsb_release -aLSB Version: :c ...
- Quartus 软件的使用之PLL的使用
练习使用Altera FPGA 内的 PLL IP核: 思路:将clk_50M倍频到clk_100M,然后观察100M时钟. 1.生成PLL的核例化文件,然后调用. 点击NEXT之后,等一会会跳出如下 ...
- 13、在 uwp应用中，给图片添加高斯模糊滤镜效果（一）
如果在应用中,如果想要给app 添加模糊滤镜,可能第一想到的是第三方类库,比如 Win2d.lumia Imaging SDK .WriteableBitmapEx,不可否认,这些类库功能强大,效果也 ...
- 区间dp总结
poj 1141 Brackets Sequence 基础的区间dp题,注意dp边缘的初始化,以及递归过程中的边界 poj 2955 Brackets 依旧注意初始化,水题 hdu 4745 Two ...
- struts2文件上传类型的过滤
转自:http://www.2cto.com/kf/201403/282787.html 第一种解决方案: 1.手动实现文件过滤: 判断上传的文件是否在允许的范围内定义该Action允许上传的文件类型 ...