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 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
js跟随滚动条滚动浮动代码
Dec 31 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
javascript实现平滑无缝滚动
Aug 09 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 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
substr()函数中文版
2006/10/09 PHP
mysql+php分页类(已测)
2008/03/31 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
javascript 获取网页参数系统
2008/07/19 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
range 标准化之获取
2011/08/28 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
JavaScript模块详解
2017/12/18 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
解析Python3中的Import
2019/10/13 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
生产部厂长职位说明书
2014/03/03 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技