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 相关文章推荐
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 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 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
PHP错误处理函数
2016/04/03 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
javascript 面向对象编程 function也是类
2009/09/17 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Django文件上传与下载(FileFlid)
2019/10/06 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
python序列类型种类详解
2020/02/26 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
美国牛仔品牌:True Religion
2018/11/16 全球购物
护士自我鉴定怎么写
2014/02/07 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android