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用法 的相关文章

  • 如何格式化 Highcharts 的 (x,y) 对数据的日期时间

    我的序列化方法会产生如下所示的日期时间字符串 2014 07 09T12 30 41Z 为什么下面的代码不起作用 function container highcharts xAxis type datetime series data x
  • 如何在codeigniter中将上传图片比例限制为16:9?

    这是我用来上传图像的代码 this gt load gt library upload ext pathinfo file name PATHINFO EXTENSION img name now ext imgConfig upload
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • php - 解析html页面

    div divbox div p para1 p p para2 p p para3 p table class table tr td td tr table p para4 p p para5 p 有人可以告诉我如何解析这个 html
  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 有没有办法在 onclick 触发时禁用 iPad/iPhone 上的闪烁/闪烁?

    所以我有一个有 onclick 事件的区域 在常规浏览器上单击时 它不会显示任何视觉变化 但在 iPad iPhone 上单击时 它会闪烁 闪烁 有什么办法可以阻止它在 iPad iPhone 上执行此操作吗 这是一个与我正在做的类似的示例
  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

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

    问题描述 要从数据库获取时间类型然后传给前台页面 数据库中的时间格式是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