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 相关文章推荐
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
vue请求数据的三种方式
Mar 04 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 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
博士208HAF收音机实习报告
2021/03/02 无线电
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
js传值 判断
2006/10/26 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
实例讲解python函数式编程
2014/06/09 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
Django中的Signal代码详解
2018/02/05 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python实现的质因式分解算法示例
2018/05/03 Python
python实现淘宝购物系统
2019/10/25 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
机电工程学生自荐信范文
2013/12/07 职场文书
公司培训欢迎词
2014/01/10 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript