innerHtml用法

2023-10-30

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;

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

innerHTMl和确认提示的使用

今天开发中涉及到对一个层的信息控制,就是控制一个层中显示什么信息,查找资料才知道使用innerHTML属性来控制层的值,这个innerHTML跟表单里面的value属性有点类似,能够控制层的显示值。

比如说我一个div层里本来没有值,我处罚一个事件后要显示值,那么就能够使用innerHTML属性了,其实innerHTML属性除了能控制层以外,还能控制窗口内容的所有元素,但是我没有测试过。

(1)对div标签的控制

div标签跟span标签是不一样的,div是一个层的块,span是一行,我们下面看演示就知道区别了。先来看一段控制div的代码。

<script language="javascript">
function chageDiv(number)
{
 if (number == 1) {
  document.getElementById("div1").innerHTML = "值为1";
 }
 if (number == 2) {
  document.getElementById("div1").innerHTML = "值为2";
 }
}
</script>

 

DIV块测试:<div id="div1">默认值</div>

<a href="#" onClick="chageDiv(1)">改变值为1</a>
<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代码。

 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

innerHtml用法 的相关文章

随机推荐

  • 后台获取数据库时间出现的格式问题记录

    问题描述 要从数据库获取时间类型然后传给前台页面 数据库中的时间格式是yyyy MM dd HH mm ss 如图所示 但是获取出来时格式就变成了Mon Dec 13 10 04 16 CST 2021这种 解决 可以在前端或者后端解决 后
  • MYSQL数据库和表

    一 安装MYSQL数据库时生成系统使用的数据库 1 显示数据库 2 创建数据库 3 选择数据库 mysql gt use stusys Database changed 4 修改数据库 mysql gt alter database stu
  • win32应用程序_不是有效的win32应用程序怎么解决

    在日常办公中经常用到电脑 有许多使用技巧 本次给大家介绍不是有效的win32应用程序怎么办 快来看看吧 方法一 不是有效的win32应用程序表示这个应用程序和系统不兼容 用户可以在计算机属性页面查看系统是32位还是64位 之后下载相对应的应
  • 【源码】贝叶斯变化点检测与时间序列分解

    BEAST 突变 季节性和趋势的贝叶斯估计器 是一种快速 通用的贝叶斯模型平均算法 用于将时间序列或1D序列数据分解为单个组件 例如突变 趋势和周期 季节性变化 如Zhao等人 2019 所述 BEAST可用于变化点检测 即断点或结构中断
  • mysql进阶1——proxysql中间件

    文章目录 一 基本了解 二 安装部署 三 proxysql管理配置 3 1 内置库 3 1 1 main库表 3 1 2 stats库表 3 1 3 monitor库 3 2 常用管理变量 3 2 1 添加管理用户 3 2 2 添加普通用户
  • WSL无法访问网络的解决办法

    今天在用WSL的时候突然网络抽风 域名解析出了问题 apt update都用不了 网上查了很多方法 什么vEthernet的IP啊 ifconfigip啊 ip route add default啥的 都不管用 最后还是看了一下 etc r
  • 多益网络提前批前端面试(凉)

    题外话 面试时间是晚上7点多 多益还是加班严重啊 这点哈哈哈哈 下面正文 自我介绍 问项目 问看过的书籍 这里就是挖坑了 尽量找自己会的说 XHR HTTP1和HTTP2的区别 隐藏一个HTML标签 v for 为什么不能用index做ke
  • QT基础部件学习笔记

    目录 一 QT程序开发流程 二 QT基础部件分类 1 按钮类 普通 工具 单选 复选 命令连接 编辑 编辑 2 布局类 水平 垂直 网格 两列 该类的实例具体与其他类同时使用 编辑 3 输出类 标签 文本浏览器 日历 七段数码管 进度条 4
  • 反编译解析数组为什么可以使用foreach

    反编译解析数组为什么可以使用foreach 一 说明 二 集合使用foreach 三 数组使用foreach 四 数组使用for 五 javap反编译程序 5 1 TestCollection结果 5 2 TestArray结果 5 3 T
  • 阿里云mysql gtid_阿里云RDS mysql报错:Statement violates GTID consistency

    近日有用户反馈使用RDS mysql8 0时 在执行语句 create table select时报错了 主要错误是 Statement violates GTID consistency 字面理解是语句违反GTID一致性 报错截图 Sta
  • 图像增强 cnn

    目录 实时图像增强 基于 间距自适应查找表 的方法 CVPR 2022 Image Adaptive 3DLUT 水下图像增强UWCNN wtf 直方图均衡化 CycleGan增强 2个项目 实时图像增强 基于 间距自适应查找表 的方法 C
  • Qt基础:四、多窗口切换

    这是一个测试多窗口切换的程序 点击主界面上得按键 然后弹出一个新的对话框窗口 1 在主界面添加一个按键 2 实现按键的槽函数 void MyWidget on showChildButton clicked QDialog dialog n
  • 优化Java应用程序性能:解决高GC耗时问题

    优化Java应用程序性能 解决高GC耗时问题 在开发和维护Java应用程序时 我们经常遇到性能问题 其中之一是高GC 垃圾收集 耗时 垃圾收集是Java虚拟机 JVM 的一项重要任务 用于自动管理内存和释放不再使用的对象 然而 当GC耗时过
  • 【模型量化】

    文章认为量化会使网络激活值的均值发生偏移 通过对偏移进行修正 可以有效提高量化模型的性能 首先考虑 激活值的均值偏移 网络BN会统计出数据经过某层后的均值和方差信息 而网络在经过量化后 同样的数据经过该层后 其均值已经不符合原BN统计出的均
  • 测试基础 - 软件测试的分类

    1 测试性质 类型 定义和考虑点 确认测试 表明软件是可正常工作的 并且符合 软件需求说明书 中规定的全部功能和性能要求 鉴定测试 针对软件质量情况进行的一项专项测试 测试出具的权威鉴定测试报告 可作为软件质量判定的重要依据 验收测试 1
  • 操作系统调度策略

    操作系统调度是为了再有限的资源下 通过对多个程序执行过程的国立 尽可能满足系统和应用的 指标 如等待响应时间 完成时间 系统得资源利用率 吞吐量 功耗等 设计一个令用户满意的调度器绝非易事 主要有以下挑战 调度指标多样性 不同场景下的调度指
  • 2014年1月8日--1月15日(杂事太多,算10小时,剩4733小时)

    1月8日 上午开会 下午被授课 算1小时吧 1月9日 决定完成光线追踪算法 DEMO7 1和 DX11的TRIANGLE 并把挖掘机的改造定帧 以及SHADER接口
  • Python人脸识别

    OpenCV 简介 OpenCV 的全称是Open Source Computer Vision Library 是一个跨平台的计算机视觉库 OpenCV 是由英特尔公司发起并参与开发 以 BSD 许可证授权发行 可以在商业和研究领域中免费
  • USB-数据传输

    一 USB编码 反向不归零编码 NRZI 位填充 规则 数据为0 电平反转 数据为1 电平不翻转 当连续出现6个相同的1穿插一个0 目的是为了防止连续出现多个1导致的同步漂移 二 USB传输帧 帧是USB传输的时间单位 低速 全速设备固定为
  • innerHtml用法

    innerHtml用法 span span