js innerHTML 改变div内容的方法 js中innerHTML与innerText的用法与区别

js innerHTML 改变div内容的方法

http://www.jb51.net/article/40267.htm

作者: 字体:[增加 减小] 类型:转载 时间:2013-08-03 我要评论

永远不知道你可以改变的内容,一个HTML元素?也许你要取代的文字段落中,以反映什么访客选定刚刚从下拉框中。通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢。
 
改变文字innerHTML
每个HTML元素具有InnerHtml属性定义的HTML代码和文字之间发生的元素的开幕式和闭幕式标记。通过改变一个元素的innerHTML后,一些用户交互,您可以更互动网页。
但是,使用innerHTML需要一些准备,如果你希望能够利用它轻松,可靠。首先,你必须给予部分要更改身份证。与标识到位,你将能够使用getElementById功能,适用于所有的浏览器。
在您认为建立您现在就可以操纵文字的要素。要开始了,让我们尝试改变文字一个大胆的标记。
下面我们来看一个用js的innerHTML来改变div值吧.
复制代码代码如下:

<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>

如对本文有疑问,请提交到交流社区,广大热心网友会为你解答!

 

 

js中innerHTML与innerText的用法与区别

匿名 | 浏览 27983 次  问题未开放回答 |举报
推荐于2017-09-05 19:17:12 最佳答案
 
1、innerHTML:

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

2、innerText:

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

 

举例:

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

 

 

特别说明:

 

  innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

 

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

 
posted @ 2017-12-27 11:07  sky20080101  阅读(627)  评论(0编辑  收藏  举报