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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
Javascript 面向对象之重载
May 04 Javascript
JavaScript 继承使用分析
May 12 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
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
简单的php写入数据库类代码分享
2011/07/26 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php中filter_input函数用法分析
2014/11/15 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python生成器用法实例详解
2019/11/22 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
蔻驰法国官网:COACH法国
2018/11/14 全球购物
行政总经理岗位职责
2013/12/05 职场文书
物流仓管员工作职责
2014/01/06 职场文书
上班看电影检讨书
2014/02/12 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
《故乡》教学反思
2014/04/10 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
初中政治教学反思
2016/02/23 职场文书
七年级作文之雪景
2019/11/18 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python
Vue的生命周期一起来看看
2022/02/24 Vue.js
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python