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生成asp.net服务器控件的代码
Feb 04 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
JS跨域总结
Aug 30 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 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修正代码
2011/05/09 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
python队列queue模块详解
2018/04/27 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
双创工作实施方案
2014/03/26 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
python计算列表元素与乘积详情
2022/08/05 Python
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript