javascript中innerText和innerHTML屬性用法實例分析
更新時間：2015年05月13日 12:10:45 作者：永遠愛好寫程序
這篇文章主要介紹了javascript中innerText和innerHTML屬性用法,實例分析了javascript中innerText和innerHTML屬性的作用和相關(guān)的使用技巧,需要的朋友可以參考下
本文實例講述了javascript中innerText和innerHTML屬性用法。分享給大家供大家參考。具體分析如下：
幾乎所有DOM元素都有innerText,innertHTML屬性(注意大小寫),分別是元素標簽內(nèi)
的文本表示形式和HTML源代碼，這兩個屬性是可讀可寫的
innerHTML也可以取代createElement,屬于簡單，粗放型，后果自負的創(chuàng)建
<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);
//得到百度網(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('我是動態(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="測試" onclick="TestOutput()"/>
<input type="button"" value="修改InnerText" onclick="EditInnerText()"/>
<input type="button"" value="修改InnerHTML" onclick="EditInnerHTML()"/>
<div id="divMain"></div>
<input type="button" value="動態(tài)添加按鈕" onclick="CreateButton()"/>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- javascript innerHTML、outerHTML、innerText、outerText的區(qū)別
- javascript innerText和innerHtml應(yīng)用
- JavaScript中innerHTML，innerText，outerHTML的用法及區(qū)別
- js中innerText/textContent和innerHTML與target和currentTarget的區(qū)別
- JavaScript動態(tài)改變HTML頁面元素例如添加或刪除
- 快速解決js動態(tài)改變dom元素屬性后頁面及時渲染的問題
- 離開頁面時檢測表單元素是否被修改,提示保存的js代碼
- js 獲取元素在頁面上的偏移量的方法匯總
- JavaScript獲取頁面上某個元素的代碼
- js使用文檔就緒函數(shù)動態(tài)改變頁面內(nèi)容示例【innerHTML、innerText】
相關(guān)文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)前端緩存的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
javascript函數(shù)以及基礎(chǔ)寫法100多條實用整理
100多個很有用的JavaScript函數(shù)以及基礎(chǔ)寫法匯總,在項目開發(fā)中經(jīng)常會使用到，本文整理了一些，希望對你們有幫助2013-01-01
這篇文章主要介紹了TS命名空間合并講解，回顧上一節(jié)的內(nèi)容，在上一節(jié)中我們介紹了TS中最常見的聲明合并：接口合并，今天要講的內(nèi)容也是TS中的聲明合并，但這次是命名空間相關(guān)的合并,需要的朋友可以參考一下2021-12-12
Django模板系統(tǒng)提供了一套豐富的工具集,能夠幫助開發(fā)者將動態(tài)數(shù)據(jù)有效地渲染到HTML頁面中,它通過特殊的語法支持變量插入、邏輯標簽和過濾器的使用,本文給大家介紹Django 中的templates使用,感興趣的朋友一起看看吧2024-10-10
這篇文章主要介紹了JS實現(xiàn)從連接中獲取youtube的key的方法,涉及javascript字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-07-07
JavaScript中實現(xiàn)頁面跳轉(zhuǎn)的幾種常用方法總結(jié)
本文主要介紹了網(wǎng)頁開發(fā)中頁面跳轉(zhuǎn)的概念和重要性,及使用JS實現(xiàn)頁面跳轉(zhuǎn)的幾種常見方法,包括使用window.location.href,window.location.replace(),window.location.assign(),window.open(),form表單提交以及HTML的a標簽等方法實現(xiàn)頁面跳轉(zhuǎn),需要的朋友可以參考下2024-10-10
這篇文章主要介紹了javascript創(chuàng)建對象的3種方法,對比分析js創(chuàng)建對象三種方式的優(yōu)缺點，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單打磚塊彈球小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
javascript使用正則表達式實現(xiàn)去掉空格之后的字符
這篇文章主要介紹了javascript使用正則表達式實現(xiàn)去掉空格之后的字符的方法,需要的朋友可以參考下2015-02-02
dat.gui可以方便地向場景中添加控制條，隨時調(diào)整參數(shù)。下面這篇文章主要給大家介紹了關(guān)于Three.js利用dat.GUI如何簡化試驗流程的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09