innerhtml的用法？inner HTML

编程之家2026-06-29855次浏览

大家好，关于innerhtml的用法很多朋友都还不太明白，今天小编就来为大家分享关于inner HTML的知识，希望对各位有所帮助！

js中innerHTML与innerText的用法与区别

1、js中innerHTML的用法：

innerHTML可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。

获取元素的内容：element.innerHTML;

给元素设置内容：element.innerHTML=htmlString;

代码示例为：

<p id="test"><font color="#000">获取段落p的 innerHTML</font></p>

document.getElementById("test").innerHTML

输出内容为:<font color="#000">获取段落p的 innerHTML</font>

2、js中innerText的用法：

innerText可获取或设置指定元素标签内的文本值，从该元素标签的起始位置到终止位置的全部文本内容(不包含html标签)。

获取元素的内容：element.innerText;

给元素设置内容：element.innerText= string;

代码示例为：

<p id="test"><font color="#000">获取段落p的 innerHTML</font>测试测试</p>

document.getElementById("test").innerHTML

输出内容为:获取段落p的 innerHTML试测试

3、innerHTML和innerText区别：

innerHTML返回的是标签内的 html内容，包含html标签。

innerText返回的是标签内的文本值，不包含html标签。

代码示例为：

<p id="test"><font color="#000">获取段落p</font>测试</p>

document.getElementById("test").innerHTML

输出内容为：<font color="#000">获取段落p</font>测试

document.getElementById("test").innerText

输出内容为：获取段落p测试

扩展资料：

1、javascript获取节点文本值：

（1）原生js写法 document.getElementById('test').innerHTML

（2）jQuery写法$('#test').html()

2、javascript获取节点的方法：

（1）通过id的方式

document.getElementById("id")

（2）通过类名查找元素，多个类名用空格分隔,得到一个HTMLCollection(一个元素集合，有length属性，可以通过索引号访问里面的某一个元素)

document.getElementsByClassName('a b')

（3）通过标签名查找元素返回一个HTMLCollection

document.getElementsByTagName('div')

（4）通过name属性查找，返回一个NodeList(一个节点集合，有length属性，可以通过索引号访问)

document.getElementsByName('c')

参考资料来源：Javascript官方文档-Element.innerHTML

参考资料来源：Javascript官方文档-HTMLElement.innerText

JavaScript中innerText和innerHTML的区别

1、innerHTML:

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

2、innerText:

从起始位置到终止位置的内容,但它去除Html标签

举例：

<span style="color:red">test1</span> test2

</div>

<a rel="external nofollow" href="javascript:alert(test.innerHTML)">innerHTML内容</a>

<a rel="external nofollow" href="javascript:alert(test.innerText)">inerHTML内容</a>

特别说明：

innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用

innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

<a rel="external nofollow" href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">去除HTML标签后的文本</a>

XML与HTML的结合用法二

XML的嵌套处理

一般情况下我们从数据库中查询得到的结果集可能很大所以从服务器返回到客户端时数据会被分成若干个页面分别进行传递此时利用TABLE元素中的DATAPAGESIZE属性可以指定每个页面包含记录集条目的个数

例如

很显然如果XML数据格式是对称的则无论是映射到ADO记录集还是绑定到表格元素上效果都会很好而在实际应用中 XML数据为非对称的例子也很多比如一本书的作者可能就不止一位这在映射和绑定时都会产生一定的麻烦解决问题的办法就是利用嵌套每一行表格仍对应一条主元素每一栏也对应着一个子元素对于重复元素则使用嵌套的表格我们假设在books xml中第一本书的作者为Dean Straight第二本书的作者为Charlotte Cooper Shelley Burke和Regina Murphy此时绑定过程如下

●创建TABLE元素并将数据岛ID赋值给DATAFLD属性

●对于单独的XML元素如<i*** n>创建TD元素并设定相应的DATAFLD属性

●对于重复元素在TD元素内部嵌套一个表格

●用单行单列的形式显示作者信息

注意这里的DATAFLD属性必须设定为$TEXT

以保证嵌套元素的内容被全部显示在指定的元素中

完整的HTML代码如下所示

<THEAD><TR><TH>Title</TH>

<TH>Author</TH></TR></THEAD>

<TBODY>

</DIV></TD>

<TD>

</TABLE>

</TD>

</TR></TBODY>

</TABLE>

事实上使用DSO效果最好的情况是针对结构对称的数据而处理非对称数据更有效的办法是使用我们以后将要介绍的DOM技术

DSO技术的应用

．访问元素的属性

用DSO访问元素的属性很简单可以直接把属性按子元素来处理

例如

……

</book>

这样在绑定到HTML表格中时就可以直接按子元素来处理

如果遇到属性名和子元素名一样的情况在元素名前加上!进行区分．遍历记录集

DSO把XML数据岛当做ADO记录集进行处理的一大好处是可以利用ADO提供的各种方法对数据源进行访问尤其是当把数据岛与类似SPAN DIV和INPUT等HTML元素绑定时通常这些元素显示的是记录集的首条记录要想对记录集进行遍历浏览可以使用ADO的方法: Move MoveFirst MoveLast MoveNext和MovePrevious比如创建一个按钮响应函数只要用户点击 Next按钮就可以逐条浏览相应的记录

例如

</XML>

Sub btnNext_onclick()

xmldso RecordSet MoveNext

End Sub

．与Script语言相结合

有些用户比较习惯编写Script语言利用DSO技术同样可以与各种Script很好地结合在一起

例如（以VB Script为例）访问记录集时代码如下:

Dim rsBooks

Set rsBooks= xmldso RecordSet

访问字段（子元素）的值

Dim sTitle

sTitle= rsBooks( title)

可以使用innerText和innerHTML属性把得到的值传递给HTML元素例如有一个DIV元素名为divTitle赋值代码如下所示

divTitle innerTEXT= sTitle

利用脚本程序还可以处理许多DSO事件下表列举了其中的一部分事件

在脚本中处理各种事件的方法就是在<SCRIPT>标签中使用FOR属性指定XML数据岛ID使用EVENT属性确定事件类型

例如获取记录集中条目的个数

lblRecords value= booklist RecordSet RecordCount

</SCRIPT>

除了显示记录数据之外脚本程序还可以对记录集进行快速查询排序编辑等操作但要指出的是虽然ADO技术中提供了类似SortColumn和SortAscending等方法对XML数据进行排序但是效果不如XSL中的排序操作所以建议大家充分利用XSL技术来实现这部分功能

lishixinzhi/Article/program/net/201311/11641

好了，文章到此结束，希望可以帮助到大家。

html基本代码大全 html代码用什么软件运行数组函数excel 数组函数的使用方法