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 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
简单的React SSR服务器渲染实现
Dec 11 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
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python中logging模块的用法实例
2014/09/29 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python生成随机验证码的两种方法
2015/12/22 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
Python中 map()函数的用法详解
2018/07/10 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
外贸英语专业求职信范文
2013/12/25 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
小学庆六一活动方案
2014/02/28 职场文书
任命书范本大全
2014/06/06 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书