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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 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 工厂模式使用方法
2010/05/18 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP中Array相关函数简介
2016/07/03 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
2010年最佳jQuery插件整理
2010/12/06 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
Python日志模块logging基本用法分析
2018/08/23 Python
Python创建或生成列表的操作方法
2019/06/19 Python
python+opencv实现摄像头调用的方法
2019/06/22 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Python模块常用四种安装方式
2020/10/20 Python
伦敦一卡通:The London Pass
2018/11/30 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
我的动漫时代的创业计划书范文
2014/01/27 职场文书
青年志愿者活动总结
2014/04/26 职场文书
党员公开承诺书内容
2014/05/20 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
MySQL 分页查询的优化技巧
2021/05/12 MySQL