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 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
webpack之引入图片的实现及问题
Oct 08 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
React实现评论的添加和删除
Oct 20 Javascript
基于JavaScript实现年月日三级联动
Jun 22 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/09/06 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
2017/02/08 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
Python数据集切分实例
2018/12/08 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
大专毕业生简历的自我评价
2013/10/20 职场文书
新年寄语大全
2014/04/12 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书