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:要插入的内容

<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:

  从起始位置到终止位置的内容, 但它去除Html标签
  上例中的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>
<think>好的,用户之前问了关于`document.getElementsByClassName`的问题,现在又问到`insertAdjacentHTML`方法。我需要先回顾之前的回答结构,确保这次保持一致的风格。 用户可能正在学习JavaScript的DOM操作方法,所以需要详细但清晰的解释。要确认`insertAdjacentHTML`的作用、语法、参数、示例以及注意事项。 首先,这个方法的名字分解来看,"insertAdjacent"说明是在特定位置插入,"HTML"意味着可以解析字符串为HTML元素。这比innerHTML更灵活,因为可以控制插入的位置,而不会覆盖现有内容。 需要分步骤介绍:定义、语法、参数详解、不同位置的示例、与类似方法的对比、兼容性、注意事项。尤其是参数部分,四个位置(beforebegin, afterbegin, beforeend, afterend)需要详细说明,并举例每个位置对应的插入效果。 要确保用户理解每个位置的实际效果,可能需要用图示或比喻的方式,但用户要求尽量用文字,所以用简单的代码示例说明。 还要考虑用户可能的误区,比如插入的位置是否有效,比如在元素没有父元素的情况下使用beforebegin是否会出错。需要提醒用户注意元素的上下文关系。 另外,比较`insertAdjacentHTML`与`innerHTML``appendChild`的区别,强调其灵活性效率,尤其是避免重新解析整个元素内容,提高性能。 最后,检查是否有兼容性问题,虽然现代浏览器都支持,但可能需要提到IE的支持情况,或者是否需要polyfill,不过我记得这个方法IE中从某个版本开始支持,需要确认具体版本。 确保回答结构清晰,分点说明,帮助用户逐步理解。可能用户是前端新手,所以需要避免术语过多,或者解释清楚每个术语。例如,解释HTML字符串如何被解析为节点,动态添加的脚本是否会执行等。 还要注意用户之前的问题回答中提到的动态集合静态集合的区别,但这里可能不需要涉及,不过可以对比`querySelectorAll`返回静态列表的情况,如果相关的话。 总结下来,回答的结构应该是:定义、语法、参数、位置示例、对比其他方法、注意事项、总结。保持与之前回答类似的格式,使用标题代码块,让用户容易跟随。</think>让我们逐步解析`insertAdjacentHTML`方法的核心机制: --- ### **1. 方法定义** 这是JavaScript中用于**动态插入HTML代码片段**的DOM操作方法。它允许你**精准控制插入位置**,直接解析HTML字符串为DOM节点,比`innerHTML`更灵活且性能更优。 --- ### **2. 语法** ```javascript element.insertAdjacentHTML(position, htmlString); ``` - **参数1** `position`:字符串类型,指定插入位置(4种可选值,见下文详解) - **参数2** `htmlString`:有效的HTML代码字符串(如`"<li>新条目</li>"`) - **无返回值**:直接修改DOM结构 --- ### **3. 位置参数详解** | 参数值 | 插入位置示意图 | 可用场景 | |----------------|------------------------------------------|-----------------------------| | `'beforebegin'` | 元素自身**前侧**(作为同级元素) | 在元素前插入新兄弟节点 | | `'afterbegin'` | 元素内部**首个子节点之前** | 在容器顶部添加内容 | | `'beforeend'` | 元素内部**最后一个子节点之后** | 在容器底部追加内容(常用) | | `'afterend'` | 元素自身**后侧**(作为同级元素) | 在元素后插入新兄弟节点 | #### ▶ 示例代码 ```html <!-- 原始结构 --> <div id="target"> <p>原有内容</p> </div> ``` ```javascript const div = document.getElementById('target'); // 插入同级前置元素 div.insertAdjacentHTML('beforebegin', '<h2>标题</h2>'); // 插入内部顶部内容 div.insertAdjacentHTML('afterbegin', '<span>开头</span>'); // 插入内部末尾内容 div.insertAdjacentHTML('beforeend', '<button>点击</button>'); // 插入同级后置元素 div.insertAdjacentHTML('afterend', '<hr>'); ``` **结果结构**: ```html <h2>标题</h2> <div id="target"> <span>开头</span> <p>原有内容</p> <button>点击</button> </div> <hr> ``` --- ### **4. 关键优势** #### **4.1 精准定位** 避免`innerHTML`的全量覆盖,可精确选择插入点(如顶部追加、底部追加或兄弟插入) #### **4.2 高效解析** 浏览器直接解析HTML字符串为DOM节点,比手动创建节点(`createElement` + `appendChild`)更高效 #### **4.3 保留事件** 插入内容中的`<script>`标签会**自动执行**(需注意安全风险),而使用`innerHTML`插入的脚本不会执行 --- ### **5. 对比其他方法** | 方法 | 特点 | |---------------------|----------------------------------------------------------------------| | `appendChild()` | 只能添加单个节点到末尾,无法插入HTML字符串 | | `innerHTML` | 完全替换元素内容,破坏原有子节点事件绑定 | | `insertAdjacentHTML` | 局部更新、支持HTML解析、保留灵活位置控制 | --- ### **6. 注意事项** - **元素上下文**:`beforebegin`/`afterend`要求目标元素必须**有父节点**(否则无效) - **XSS风险**:直接插入未验证的HTML字符串可能导致安全漏洞(需对用户输入内容做转义) - **性能优化**:频繁调用时建议先构建完整HTML字符串再一次性插入 --- ### **7. 兼容性** - 支持所有现代浏览器(包括IE4+) - 移动端完全兼容 --- ### **总结** `insertAdjacentHTML`是**动态构建DOM的高效工具**,特别适合需要局部更新且重视性能的场景。通过灵活的位置参数,可实现精准的DOM操作,比传统方法更简洁可控。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值