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 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
详解微信小程序工程化探索之webpack实战
Apr 20 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
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
JavaScript 特殊字符
2007/04/05 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
javascript this详细介绍
2016/09/19 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
canvas的神奇用法
2017/02/03 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
python数组复制拷贝的实现方法
2015/06/09 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
python写入已存在的excel数据实例
2018/05/03 Python
Python通过Pillow实现图片对比
2020/04/29 Python
Python基于template实现字符串替换
2020/11/27 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
社区义诊活动总结
2014/04/30 职场文书
班训口号大全
2014/06/18 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年人大工作总结
2014/12/10 职场文书