js中innerText，innerHTML的用法
innerText，outerText，innerHTML，outerHTML
这次我们要使用另一些对象属性对来实现动态改变文本，它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以后将可随心所欲的设计动态内容了，不可错过哦！
例12 动态改变文本和Html
<html>
<head>
<title>DHtml举例12</title>
<style><!--
body {font-family:"宋体";color="blue";font-size="9pt"}
-->
</style>
<script language="JavaScript">
function changeText()
{
DT.innerText="我很好!";
}//function
function changeHtml()
{
DH.innerHTML="<i><u>我姓肖!</u></i>";
}//function
function back()
{
DT.innerText="您好吗?";
DH.innerHTML="您姓什么?";
}
</script>
</head>
<body>
<p><font color="gray">请点击下边的文字……</font>
<ul>
<li id="DT" οnclick="changeText()">您好吗? </li>
<li id="DH" οnclick="changeHtml()">您姓什么? </li>
<li οnclick="back()">恢复原样! </li>
</ul>
</body>
</html>
innerText属性用来定义对象所要输出的文本，在本例中innerText把对象DT中的文本“您好吗?”变成了“我很好!”（语句DT.innerText="我很好!"）。而对对象DH的改变用了innerHTML属性，它除了有innerText的作用外，还可改变对象DH内部的HTML语句，于是它把文本变成了“我姓肖!”，而且文本输出改成了斜体（<i></i>）并下加一条直线（<u></u>），即语句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有类似的作用，读者不妨自己试试看。
下面我们来设计一个有趣的动态页面。
例13 文本的动态输入与输出
<html>
<head>
<title>DHtml举例13</title>
<style><!--
body {font-family:"宋体";color="blue";font-size:"9pt"}
.blue {color:blue;font-size:9pt}
-->
</style>
<script language="JavaScript">
function OutputText()
{
if(frm.txt.text!="")
{ Output.innerHTML="在此处输出文本：<u>"+frm.txt.value+"</u>";} //Output为一对象。
else
{ Output.innerText="在此处输出文本：";}
}//function
</script>
</head>
<body>
<p><br></p>
<form name="frm">
<p><font color="gray">请在文本框中输入文字:</font>
<input type="text" name="txt" size="50"><br>
<input type="button" value="输出文本" name="B1" class="blue" οnclick="OutputText()"></p>
</form>
<p id="Output">在此处输出文本：</p>
</body>
</html>
此例的动态效果如下，先在文本框中输入文本，然后按“输出文本”的按钮，接着网页便会自动输出您所输入的文本。
此外，我们还可使用insertAdjacentHTML和insertAdjacentText方法（方法即是某特定对象能直接调用的函数）在先前文本或Html内容的前边或后边插入新的文本或Html内容，使用这些方法需要参数，这些参数有：BeforeBegin、 AfterBegin、 BeforeEnd和AfterEnd，它们是用来标明文本或Html插入的地方。具体用法如下例：
例14 使用insertAdjacentHTML插入文本
<html>
<head>
<title>DHtml举例14</title>
<style><!--
body {font-family:"宋体";color="blue";font-size:"9pt"}
-->
</style>
<script language="JavaScript">
function Insert()
{
document.all.New.insertAdjacentHTML("AfterBegin","<font color=red>-新插入的内容-<font>");
//第一个参数是用来指明位置，第二个参数是要插入的Html内容。
}//function
</script>
</head>
<body>
<p><br>
</p>
<p id="New" οnclick="Insert()">点击此行蓝色文字将插入文本</p>
</body>
</html>
js中innerText，innerHTML的用法相关推荐
- html dom createevent,js 中 document.createEvent的用法
js 中 document.createEvent的用法 更新时间:2010年08月29日 23:22:02 作者: 用该方法创建了 Event 对象以后,必须用上表中所示的初始化方法初始化对象. ...
- js 中 document.createEvent的用法-转载
js 中 document.createEvent的用法 <a class="comment-mod" οnclick="alert('ss')" hre ...
- js中“||”和“”的高级用法 js，与或运算符 || 妙用
网络上找到的一篇关于逻辑与和逻辑或的文章,详细记录一下. http://www.jb51.net/article/21339.htm 例1:用于赋值 &&:从左往右依次判断,当当前值为 ...
- 前端开发：JS中截取字符串的用法总结
前言 在前端开发过程中,对JS相关的字符串处理可谓是家常便饭,对字符串对处理也是前端开发过程中使用频率非常高的知识点之一,对从后台获取到的字符串进行二次处理也是非常普遍的需求,那么本文就来分享一下在前 ...
- js中的innerHTML的作用
js中常常用到innerHTML,其作用就是获取到标签里面的内容,同时也可以为标签添加内容 <div><p id="text">hello world< ...
- js中的extend的用法及其JS中substring与substr的区别
1. JS中substring与substr的区别 之前在项目中用到substring方法,因为C#中也有字符串的截取方法Substring方法,当时也没有多想就误以为这两种方法的使用时一样的. ...
- js中的escape的用法汇总
js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...
- js中call()方法的用法
call: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一 ...
- js中replace作用以及用法
replace作用以及用法 1. 作用:替换字符串中的内容 2. 用法:str.replace(regexp|substr, newSubStr|function) 3. 参数说明:- regexp( ...
最新文章
- Windows Server 2016之RDS部署之添加RD网关
- [转]docker 部署 mysql + phpmyadmin 3种方法
- jquery 滚动条位置的
- [html] html中如何使用svg？
- 韩寒近期【雷人】语录
- Android开发与Sequoyah的安装问题
- 把网站图片和php程序分离,我的图片服务器和WEB应用服务器相分离的简单方案
- C++ std::function怎么用
- 格式要求_论著的格式要求
- linux 下如何给火狐安装flash插件（常用命令cd cp tar 实践）
- SmartImageView
- 2020年安卓各大应用市场份额占比分析
- centos下安装firefox
- 修改html2canvas生成图片的dpi
- Altium Designer 19简易教程（原理图的绘制）
- 使用xadmin搜索search_fields报错:Related Field got invalid lookup: icontains
- Oracle 查询当前系统时间的几种方式
- 【180730】WinForm打地鼠小游戏源码
- 如何有效阅读caffe源码
- 软件可靠性分析方法有失效模式影响分析法、严酷度分析法、故障树分析法、事件树分析法、潜在线路分析法
热门文章
- 【错误记录】VMware 虚拟机报错 ( Ubuntu-Unattended upgrade in progress during shutdown, please don‘t turn off )
- 【数字信号处理】离散时间系统因果性 ( 因果性概念 | 充要条件及证明 )
- 【Groovy】Groovy 扩展方法 ( 静态扩展方法配置 | 扩展方法示例 | 编译静态扩展类 | 打包静态扩展类字节码到 jar 包中 | 测试使用 Thread 静态扩展类 )
- 【C 语言】数组 ( 数组取值操作 | array[i][j] 用法 等价于 *( *(array = i) + j ) 用法 | 下标操作到指针操作演化过程 )
- 【Netty】NIO 网络通信 SelectionKey 常用 API 简介
- 【Kotlin】Kotlin Sealed 密封类 ( 密封类声明 | 密封类子类定义 | 密封类特点 | 代码示例 )
- [Spring cloud 一步步实现广告系统] 12. 广告索引介绍
- ●BZOJ 4596 [Shoi2016]黑暗前的幻想乡
- 【在还原SQL Server数据库时发生对于服务器“XXX”操作系统错误】很实用的解决方案...
- 汇编实验1遇到的问题及解决之记录（以及尚未解决的疑惑，大神可以帮帮看看吗）