如何在指定的地方插入html内容和文本内容

发布网友发布时间：2022-04-22 22:39

共2个回答

懂视网时间：2022-04-20 13:18

摘要：.insertadjacenthtml()的用法网上资料很少，以下为Gxl网整理的教程，对大家有一定的参考价值！

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: 插入到标签开始前

2. afterBegin:插入到标签开始标记之后

3. beforeEnd:插入到标签结束标记前

4. afterEnd:插入到标签结束标记后

// 原来的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:

从起始位置到终止位置的内容, 但它去除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>

热心网友时间：2022-04-20 10:26

dhtml提供了两个方法来进行添加，insertAdjacentHTML和insertAdjacentText
insertAdjacentHTML方法：在指定的地方插入html标签语句。
原型：insertAdjacentHTML(swhere,stext)
参数：
swhere:指定插入html标签语句的地方，有四种值可以用：
1.beforeBegin:插入到标签开始前
2.afterBegin:插入到标签开始标记后
3.beforeEnd:插入到标签结束标记前
4.afterEnd:插入到标签结束标记后
stext:要插入的内容
例：

复制代码代码如下:

var sHTML="<input type=button go2()" + " value='Click Me'><BR>"
var sScript='<SCRIPT DEFER>'
sScript = sScript + 'function go2(){ alert("Hello from inserted script.") }'
sScript = sScript + '</script' + '>';
ScriptDiv.insertAdjacentHTML("afterBegin",sHTML + sScript);

在html正文中加入一行：
<DIV ID="ScriptDiv"></Div>
最终变成：

复制代码代码如下:

<DIV ID="ScriptDiv">
<input type=button onclick=go2() value='Click Me'><BR>
<SCRIPT DEFER>
function go2(){alert("Hello from inserted sctipt.")}'
</script>
</DIV>

insertAdjacentText方法与insertAdjacentHTML方法类似，只不过只能插入纯文本，参数相同

这
两个属性还是比较适用的，尤其是在绘图等地方用的比较多，它的优点是不会覆盖原有的内容，让我们来假设一下吧，有一个DIV，它里面已经有内容了，现在我
们还要动态的添加内容进去，而又不能覆盖原有的内容，那么这时候这个东西就很重要了，innerHTML是会把原有的东西覆盖掉的。
所有成对出现的HTML都可以用这个属性，这点和innerHTML一样，比如<body>..</body>、<div>....</div>等这些都有这两个属性

补充下：刚才我试了下，innerHTML这个属性是可读写的，以前我知道innerHTML可以对节点插入内容，但是这个属性也是可读的，也就是说innerHTML中保存的是节点的html内容；看下以下代码就完全明白了：

复制代码代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
safdsdaf按时地方
<script language="javascript">
alert(document.body.innerText)
</script>
</body>
</html>

上面是我转帖到别人的代码，下面我再补充几行代码，也很经典有，也许你用的着：

复制代码代码如下:

<script language="javascript" type="text/javascript">
function addFile()
{
var filebutton = '<br><input type="file" size="50" name="File" />';
document.getElementByIdx('FileList').insertAdjacentHTML("beforeEnd",filebutton);
}
</script>

上面的是Head里面的脚本，下面是body里面的：html代码：

复制代码代码如下:

<p id="FileList">
<input type="file" runat="server" size="50" name="File"/>
</p>

你把代码拷贝到文件中保存成一个html就知道效果了。

全部栏目

如何在指定的地方插入html内容和文本内容