innerHTML用法

nerHTML是html标签的属性,成对出现的标签大多数都有这个属性
是开始标签和结束标签之间的字符,不包括标签本身
比如

<p id="pp">aaaaaaaaaa<span id="ss">bbbbbbbb</span> </p>

这里的p标签和span标签嵌套在一起
那么pp.innerHTML的内容就是
aaaaaaaaaa<span id="ss">bbbbbbbb</span>

ss.innerHTML的内容就是

bbbbbbbb

=========================
类似的一个属性是outerHTML

那么pp.innerHTML的内容就是
<p id="pp">aaaaaaaaaa<span id="ss">bbbbbbbb</span> </p>

ss.innerHTML的内容就是

<span id="ss">bbbbbbbb</span>

 

 

innerHtml用法

 

<html>

<head>

<script>

function Test(){

        var str="";

        str+="Hello,";

        str+="This is a Test!<br />";

        str+="I Love you;<br />";

        str+="I Love you,too!";

        p.innerHTML=str+"<br /><br />"+Math.random();

        setTimeout('Test();',1000);

}

</script>

</head>

<body οnlοad=Test();>

<span id="p"></span>

</doby>

</html>

innerTEXT与innerHTML的区别:

跨浏览器的设置innerHTML方法

2006年11月06日 星期一 09:37 A.M.

From:http://www.ajaxwing.com/index.php?c=DOM

Author:kenxu

很多人都可能遇到过这种情况:设置 innerHTML 的时候,插入的 HTML 代码中包含脚本,但这些脚本却不生效,或者在 IE 上生效在其它浏览器上就不生效。原因很简单:不同浏览器对插入 innerHTML 中的脚本有不同的处理方法。经过实践,归纳如下:

对于IE,首先 script 标签必须带 defer 属性,其次在插入时刻,innerHTML 的所属节点必须在 DOM 树中;对于 Firefox 和 Opera,在插入时刻,innerHTML 的所属节点不可以在 DOM 树中。

根据上面结论,给出通用的设置 innerHTML 方法:

/*

 * 描述:跨浏览器的设置 innerHTML 方法

 * 允许插入的 HTML 代码中包含 script 和 style

 * 作者:kenxu <ken@ajaxwing.com>

 * 日期:2006-03-23

 * 参数:

 * el: 合法的 DOM 树中的节点

 * htmlCode: 合法的 HTML 代码

 * 经测试的浏览器:ie5+, firefox1.5+, opera8.5+

 */

var setInnerHTML = function (el, htmlCode) {

 var ua = navigator.userAgent.toLowerCase();

 if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0) {

 htmlCode = '<div style="display:none">for IE</div>' + htmlCode;

 htmlCode = htmlCode.replace(/<script([^>]*)>/gi,

 '<script$1 defer="true">');

 el.innerHTML = htmlCode;

 el.removeChild(el.firstChild);

 }

 else {

 var el_next = el.nextSibling;

 var el_parent = el.parentNode;

 el_parent.removeChild(el);

 el.innerHTML = htmlCode;

 if (el_next) {

 el_parent.insertBefore(el, el_next)

 } else {

 el_parent.appendChild(el);

 }

 }

}

还有某些情况,我们事先不清楚要插入到 innerHTML 的 HTML 代码包含什么,如果包含 document.write 语句,那么就会破坏整个页面。对于这种情况,可以通过重新定义 document.write 来避免。代码如下:

/*

 * 描述:通过重定义 document.write 函数,避免在使用 setInnerHTML 时,

 * 插入的 HTML 代码中包含 document.write ,导致原页面受到破坏的情况。

 */

document.write = function() {

 var body = document.getElementsByTagName('body')[0];

 for (var i = 0; i < arguments.length; i++) {

 argument = arguments[i];

 if (typeof argument == 'string') {

 var el = body.appendChild(document.createElement('div'));

 setInnerHTML(el, argument)

 }

 }

}

在这篇文章编写之前,已经有一个比较完善的解决方法《让插入到 innerHTML 中的 script 跑起来》。比较起来,《让》给出的方法考虑得更细致,但处理起来比较繁琐,效率不高。而这里给出的方法则更简单,并且充分利用了浏览器的特性。

小心使用innerHTML

最近在做AJAX,想用javascript实现DataList功能,遇到一个棘手的问题,由于要生成的HTML很长,所以我写成如下的形式:

list.innerHTML="<table><tr>";

list.innerHTML+="<td>"

......

但是这样生成的innerHTML始终不对,研究了半天,原来是innerHTML搞得鬼.innerHTML自带了语法检查功能,他会自动把不完整的HTML代码补充完整.运行如下的一个测试代码就可以发现了.

document.getElementById("AlbumList").innerHTML="<table><tr>";

alert(document.getElementById("AlbumList").innerHTML);

他会自动把我的代码里面添加了<tbody>和</tr></table>等标记.神奇!!!

那么不让他自动填写的一个办法就是用一个中间变量:

var html="<table><tr>";

html+="<td>";

......

list.innerHTML=html;

就这样就可以解决问题了.

添加到网摘:<a href="#" onClick="chageDiv(2)">改变值为2</a>

 

运行的时候,点击“改变值为1”那么“默认值”这个内容将会被改变为“值为1”,但是注意其中的界面,就是会发现“DIV测试:”和“默认值”是两行显示的,因为DIV是按块来显示的。

(2)对span的控制

与div类似,但是它是按照行来显示的,看下面的代码:

function chageSpan(number)

{

 if (number == 1) {

  document.getElementById("span1").innerHTML = "值为1";

 }

 if (number == 2) {

  document.getElementById("span1").innerHTML = "值为2";

 }

}

</script>

Span行测试:

<span id="span1">默认值</span><br>

<a href="#" onClick="chageSpan(1)">改变值为1</a>

<a href="#" onClick="chageSpan(2)">改变值为2</a>

 

当点击“改变值为1”的时候,“默认值”将变为“值为1”,但是“Span行测试”和“默认值”是在同一行显示的,跟DIV不一样。

另外一个值得注意的就是,不管是div还是span,后面的名字都是以为id来定义的,不是象表单一样是使用name来定义的。

(3)confirm确认提示框的制作

当我们要执行一个危险操作的时候,比如删除某个内容等,那么就应该给用户相应的提示来用户不容易犯错误。一般提示都是使用confirm()函数来处理的,给它提交一个参数作为显示的信息提示,那么访问的时候将弹出对话框,如果点击了“确定”那么将改函数返回true,点击了“取消”将放回 false,我们针对这个特点来使用两种方法来控制用户是否执行某个操作。

看代码:

<script language="javascript">

function accessNeteasy()

{

 if(confirm('你真的要访问网易新闻 ?')) {

  location='http://calendar.eyou.eyou';

 }

}

function accessSina()

{

 if (confirm('你确定要访问新浪新闻 ?')) {

  return true;

 } else {

  return false;

 }

}

</script>

 

访问方式一:

<a href="#" onClick="accessNeteasy()">网易新闻</a><br>

访问方式二:

<a href="http://news.sina.com.cn" onClick="return accessSina()">新浪新闻</a>

 

我们这里建立了两个函数,一个accessNeteay,一个accessSina,就是访问网易和新浪,我们使用不同的方法,第一种就是当点了链接以后,判断如果是true的话,那么就location到指定链接,这种方法比较不具有通用型,只能针对单个的链接。第二种方法是使用返回值的形式,当确定要访问的时候返回true,不确定的时候返回false,那么这个可以针对任何链接来做,写成一个通用的信息提示,方便页面中的调用。

以上代码都经过测试通过,可以自己再这个基础上进行扩展,写出自己需要的JavaScript代码。

 

 

 

 

*************************************************************************************************

用法:

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值