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 相关文章推荐
dojo随手记 gird组件引用
Feb 24 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
详细聊聊vue中组件的props属性
Nov 02 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使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
实例讲解python中的协程
2018/10/08 Python
对python 自定义协议的方法详解
2019/02/13 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
python中提高pip install速度
2020/02/14 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
年度考核自我鉴定
2014/02/02 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
单位员工收入证明样本
2014/10/09 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
MySQL 原理与优化之Update 优化
2022/08/14 MySQL