[收藏]innerText，outerText，innerHTML，outerHTML

最新推荐文章于 2020-12-13 13:53:26 发布
最新推荐文章于 2020-12-13 13:53:26 发布
阅读量2k 收藏 2
点赞数
分类专栏： JavaScript 文章标签： html javascript function insert input button

这次我们要使用另一些对象属性对来实现动态改变文本，它们就是：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>


您可以试一下另外三个参数BeforeBegin、BeforeEnd和AfterEnd。insertAdjacentText方法地用法也是类似的。

hrstudy
关注
专栏目录
innerText innerHTML的用法以及注意事项 [推荐]
09-05
我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。
innerText 使用
csdt_csdt的专栏
01-22 5796
function showTime(){ //在元素间的文本就是通过 对象 .innerText document.getElementById("mytime").innerText = new Date().toLocaleString(); } setInterval("showTime()",1000);
js中innerHTML与innerText的用法
jzgl_cadn的专栏
06-24 139
innerText，outerText，innerHTML，outerHTML 这次我们要使用另一些对象属性对来实现动态改变文本，它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了 例12 动态改变文本和Html [code="java"] DHtml举例12 function...
innerText，innerHTML的用法以及注意事项
w36680130的博客
08-10 2383
我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得
innerHtml和innerText的用法
澜澜
08-11 970
innerHtml 和 innerText 用法：    test1 test2在JS中可以使用：test.innerHTML: 　　也就是从对象的起始位置到终止位置的全部内容,包括Html标
html innerHTML outerHTML innerText outerText等的区别及实例汇总
09-29
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
innerHTML,outerHTML,innerText,outerText的用法及区别解析
09-04
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
javascript innerHTML、outerHTML、innerText、outerText的区别
10-30
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个用于操作HTML元素内容的属性，它们各自有不同的功能和用途。 1. innerHTML： - innerHTML允许我们获取或设置一个元素内部的HTML内容。当我们设置...
innerText，innerHTML的用法
feng2375的专栏
01-06 712
innerText，outerText，innerHTML，outerHTML 这次我们要使用另一些对象属性对来实现动态改变文本，它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。这是全新的方法，当您掌握它以后将可随心所欲的设计动态内容了，不可错过哦！例12 动态改变文本和Html html> h
innerText 使用示例
01-19
代码如下: <html> <head> [removed] function showTime(){ //在元素间的文本就是通过 对象 .innerText document.getElementById(“mytime”).innerText = new Date().toLocaleString(); } setInterval(“showTime()”,1000); [removed] </head> <body> <span xss=removed></span> </body> </h
js中innerHTML与innerText的用法与区别
04-29
js中innerHTML与innerText的用法与区别js中innerHTML与innerText的用法与区别
innerHTML和innerText的使用方法
kongbingyan的博客
04-14 979
innerHTML和innerText的使用方法
js中innerHTML和innerText的用法
a785589446的博客
03-01 256
<div id="test"> <span style="color:red">test1</span> test2 </div> 在JS中可以使用： 1. test.innerHTML: 　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 　　上例中的test.innerHTML的值也就...
innerhtml和innertext用法以及innerHTML与innertext的区别
445822357
09-26 196
innerhtml用法 innertext用法 以及innerHTML与innertext的区别，看完这个大家以后在实际应用中，就可以选择合适的方法。尽可能的考虑到兼容性。 test.innerHTML:　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。　　上例中的test.innerHTML的值也就是“&lt;span style="color:red"&gt;test1&lt...
innerText和innerHTML的区别和用法
四叶草
05-13 730
用法： 1、innerHTML: 　　也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 2、innerText: 　　从起始位置到终止位置的内容, 但它去除Html标签  区别： 1.innerHTML是符合W3C标准的属性 2.innerText只适用于IE浏览器 推荐用法： 尽可能地去使用innerHTML，而
innerHTML和innerText的用法以及不同点
qq_43445758的博客
12-13 1867
innerHTML和innerText的区别 两者的主要区别在于用法不同； innerHTML可以将获取的元素作为HTML元素进行解析或修改， innerText可以将获取的元素作为纯文本进行解析或修改。 innerHTML和innerText的具体用法： <!DOCTYPE html> <html> <head> <meta charset="asmo-708"> <title></title> </head&gt
HTML属性详解：innerHTML、outerHTML、innerText与outerText的区别
"了解JavaScript中的innerHTML、outerHTML、innerText和outerText属性的用法及它们之间的差异对于前端开发至关重要。这些属性允许我们操作DOM元素的内容和结构。以下是对这些属性的详细解释： 1. innerHTML: - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值