javascript中innerText和innerHTML属性用法实例分析


Posted in Javascript onMay 13, 2015

本文实例讲述了javascript中innerText和innerHTML属性用法。分享给大家供大家参考。具体分析如下:

几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内
的文本表示形式和HTML源代码,这两个属性是可读可写的

innerHTML也可以取代createElement,属于简单,粗放型,后果自负的创建

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>测试(innerText和innerHTML)</title>
 <script type="text/javascript">
 function TestOutput() {
  var myLink = document.getElementById("lnk");
  alert('innerText-->' + myLink.innerText);
  //得到百度网站
  alert('innerHTML-->' + myLink.innerHTML);
  //得到百<font color="red">度</font>网站
 }
 function EditInnerText() {
  var myLink = document.getElementById("lnk");
  myLink.innerText = "凤凰网";
 }
 function EditInnerHTML() {
  var myLink = document.getElementById("lnk");
  myLink.innerHTML = "<font color='blue'>凤凰网</font>";
 }
 function dynamicButtonClick() {
  alert('我是动态创建的');
 }
 function CreateButton() {
  var div = document.getElementById("divMain");
  div.innerHTML = "<input type='button' value='单击我' 
  onclick='dynamicButtonClick()' />";
 }
 </script>
</head>
<body>
<a href="http://www.baidu.com" id="lnk">
百<font color="red">度</font>网站</a>
<input type ="button" value="测试" onclick="TestOutput()"/>
<input type="button"" value="修改InnerText" onclick="EditInnerText()"/>
<input type="button"" value="修改InnerHTML" onclick="EditInnerHTML()"/>
<div id="divMain"></div>
<input type="button" value="动态添加按钮" onclick="CreateButton()"/>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
js作用域及作用域链工作引擎
Jul 07 Javascript
javascript元素动态创建实现方法
May 13 #Javascript
javascript实现模拟时钟的方法
May 13 #Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 #Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 #Javascript
javascript中clipboardData对象用法详解
May 13 #Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 #Javascript
浅谈jQuery中replace()方法
May 13 #Javascript
You might like
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
Cookie 小记
2010/04/01 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
layui实现数据分页功能
2019/07/27 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python ubplot使用方法解析
2020/01/10 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
大学班级干部的自我评价分享
2014/02/10 职场文书
电气工程自动化求职信
2014/03/14 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
中班幼儿评语大全
2014/04/30 职场文书
公积金接收函格式
2015/01/30 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
升学宴祝酒词
2015/08/11 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
Window server中安装Redis的超详细教程
2021/11/17 Redis
Golang日志包的使用
2022/04/20 Golang