快捷導(dǎo)航

javascript中innerText和innerHTML屬性用法實(shí)例分析

更新時(shí)間：2015年05月13日 12:10:45 作者：永遠(yuǎn)愛(ài)好寫(xiě)程序

這篇文章主要介紹了javascript中innerText和innerHTML屬性用法,實(shí)例分析了javascript中innerText和innerHTML屬性的作用和相關(guān)的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了javascript中innerText和innerHTML屬性用法。分享給大家供大家參考。具體分析如下：

幾乎所有DOM元素都有innerText,innertHTML屬性(注意大小寫(xiě)),分別是元素標(biāo)簽內(nèi)
的文本表示形式和HTML源代碼，這兩個(gè)屬性是可讀可寫(xiě)的

innerHTML也可以取代createElement,屬于簡(jiǎn)單，粗放型，后果自負(fù)的創(chuàng)建

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>測(cè)試(innerText和innerHTML)</title>
 <script type="text/javascript">
 function TestOutput() {
  var myLink = document.getElementById("lnk");
  alert('innerText-->' + myLink.innerText);
  //得到百度網(wǎng)站
  alert('innerHTML-->' + myLink.innerHTML);
  //得到百<font color="red">度</font>網(wǎng)站
 }
 function EditInnerText() {
  var myLink = document.getElementById("lnk");
  myLink.innerText = "鳳凰網(wǎng)";
 }
 function EditInnerHTML() {
  var myLink = document.getElementById("lnk");
  myLink.innerHTML = "<font color='blue'>鳳凰網(wǎng)</font>";
 }
 function dynamicButtonClick() {
  alert('我是動(dòng)態(tài)創(chuàng)建的');
 }
 function CreateButton() {
  var div = document.getElementById("divMain");
  div.innerHTML = "<input type='button' value='單擊我' 
  onclick='dynamicButtonClick()' />";
 }
 </script>
</head>
<body>
<a  id="lnk">
百<font color="red">度</font>網(wǎng)站</a>
<input type ="button" value="測(cè)試" onclick="TestOutput()"/>
<input type="button"" value="修改InnerText" onclick="EditInnerText()"/>
<input type="button"" value="修改InnerHTML" onclick="EditInnerHTML()"/>
<div id="divMain"></div>
<input type="button" value="動(dòng)態(tài)添加按鈕" onclick="CreateButton()"/>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)前端緩存的方法
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)前端緩存的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
javascript函數(shù)以及基礎(chǔ)寫(xiě)法100多條實(shí)用整理
100多個(gè)很有用的JavaScript函數(shù)以及基礎(chǔ)寫(xiě)法匯總,在項(xiàng)目開(kāi)發(fā)中經(jīng)常會(huì)使用到，本文整理了一些，希望對(duì)你們有幫助
2013-01-01
TypeScript命名空間合并講解
這篇文章主要介紹了TS命名空間合并講解，回顧上一節(jié)的內(nèi)容，在上一節(jié)中我們介紹了TS中最常見(jiàn)的聲明合并：接口合并，今天要講的內(nèi)容也是TS中的聲明合并，但這次是命名空間相關(guān)的合并,需要的朋友可以參考一下
2021-12-12
Django 中的templates使用示例詳解
Django模板系統(tǒng)提供了一套豐富的工具集,能夠幫助開(kāi)發(fā)者將動(dòng)態(tài)數(shù)據(jù)有效地渲染到HTML頁(yè)面中,它通過(guò)特殊的語(yǔ)法支持變量插入、邏輯標(biāo)簽和過(guò)濾器的使用,本文給大家介紹Django 中的templates使用,感興趣的朋友一起看看吧
2024-10-10
JS實(shí)現(xiàn)從連接中獲取youtube的key實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)從連接中獲取youtube的key的方法,涉及javascript字符串操作的相關(guān)技巧,需要的朋友可以參考下
2015-07-07
JavaScript中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種常用方法總結(jié)
本文主要介紹了網(wǎng)頁(yè)開(kāi)發(fā)中頁(yè)面跳轉(zhuǎn)的概念和重要性,及使用JS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種常見(jiàn)方法,包括使用window.location.href,window.location.replace(),window.location.assign(),window.open(),form表單提交以及HTML的a標(biāo)簽等方法實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn),需要的朋友可以參考下
2024-10-10
javascript創(chuàng)建對(duì)象的3種方法
這篇文章主要介紹了javascript創(chuàng)建對(duì)象的3種方法,對(duì)比分析js創(chuàng)建對(duì)象三種方式的優(yōu)缺點(diǎn)，感興趣的小伙伴們可以參考一下
2016-11-11
JS實(shí)現(xiàn)簡(jiǎn)單打磚塊彈球小游戲
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單打磚塊彈球小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
javascript使用正則表達(dá)式實(shí)現(xiàn)去掉空格之后的字符
這篇文章主要介紹了javascript使用正則表達(dá)式實(shí)現(xiàn)去掉空格之后的字符的方法,需要的朋友可以參考下
2015-02-02
Three.js利用dat.GUI如何簡(jiǎn)化試驗(yàn)流程詳解
dat.gui可以方便地向場(chǎng)景中添加控制條，隨時(shí)調(diào)整參數(shù)。下面這篇文章主要給大家介紹了關(guān)于Three.js利用dat.GUI如何簡(jiǎn)化試驗(yàn)流程的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-09-09