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 相关文章推荐
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
jQuery拖动图片删除示例
May 10 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 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 Hash函数,增强密码安全
2011/02/25 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
微信小程序仿通讯录功能
2020/04/09 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
大四学生毕业自荐信
2013/11/07 职场文书
展览会邀请函
2015/02/02 职场文书
重阳节简报
2015/07/20 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
PHP控制循环操作的时间
2021/04/01 PHP
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA