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陷阱清单
May 31 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
Vue底层实现原理总结
Feb 17 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 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书写安全的脚本代码
2012/02/05 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
安全施工标语
2014/06/07 职场文书
学校消防安全责任书
2014/07/23 职场文书
作风转变心得体会
2014/09/02 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers