JavaScript中innerHTML使用方法實例
更新時間：2022年10月14日 11:40:19 作者：恰恰想學(xué)習(xí)
js中常常用到innerHTML,其作用就是獲取到標簽里面的內(nèi)容,同時也可以為標簽添加內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于JavaScript中innerHTML使用方法的相關(guān)資料,需要的朋友可以參考下
innerHTML
innerHTML屬性允許更改html元素的內(nèi)容,可以設(shè)置或返回表格行的開始和結(jié)束標簽之間的HTML,本篇文章就來給大家介紹關(guān)于innerHTML的用法
innerHTML的寫法
對于element,設(shè)置innerHTML指定的元素名稱
element.innerHTML;
將指定元素的html代碼分配給變量
var sample1 = element.innerHTML
用指定元素替換變量的值
通過如下編寫,可以在刪除element元素的內(nèi)容之后在element元素上顯示變量sample2的內(nèi)容
element.innerHTML = sample2;
清空指定的元素
可以通過指定""來清空element元素的內(nèi)容
element.innerHTML = "";
下面我們來看innerHTML使用的具體實例
<html>
<head>
<meta charset = "utf-8">
<title></titke>
</head>
<body>
<div id ="txt">
<div id="txt1">文字內(nèi)容</div>
<span id="txt2">文字內(nèi)容2</span>
</div>
<p>-----------------------</p>
<div id = "innerHTML"></div>
</body>
</html>運行結(jié)果如下
我們來看使用innerHTML屬性的結(jié)果
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="txt">
<div id="txt1">文字內(nèi)容</div>
<span id="txt2">文字內(nèi)容2</span>
</div>
<p>-----------------------</p>
<div id = "innerHTMLtxt"></div>
<script type="text/javascript">
innerHTMLtxt.innerHTML="恰恰走丟了"
</script>
</body>
</html>運行結(jié)果如下
清空指定的元素
可以通過指定""來清空element元素的內(nèi)容 使用innerHTML來清空元素的代碼
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="txt">
<div id="txt1">文字內(nèi)容</div>
<span id="txt2">文字內(nèi)容2</span>
</div>
<p>-----------------------</p>
<div id = "innerHTMLtxt"></div>
<script type="text/javascript">
txt.innerHTML=""
innerHTMLtxt.innerHTML="qq走丟了"
</script>
</body>
</html>
div標簽為txt的已經(jīng)被innerHTML清空
總結(jié)
到此這篇關(guān)于JavaScript中innerHTML使用方法的文章就介紹到這了,更多相關(guān)js的innerHTML使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了利用JS生成博文目錄及CSS定制博客的相關(guān)資料,需要的朋友可以參考下2016-02-02
用javascript實現(xiàn)自動輸出網(wǎng)頁文本
這篇文章主要介紹了用javascript實現(xiàn)自動輸出網(wǎng)頁文本，用到兩個函數(shù)：setTimeout(),遞歸和String.substring();,需要的朋友可以參考下2015-07-07
做了一個用戶等級的進度條，只是練手。2010-07-07
Bootstrap的popover(彈出框)在append后彈不出(失效)
這篇文章主要介紹了Bootstrap的popover(彈出框)在append后彈不出，失效的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了javascript刷新父頁面方法匯總詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
需要腳本在客戶端判斷大小和文件類型，由于網(wǎng)上沒有適合的，就自己寫了一個并測試 文件上傳大小限制的一個例子，在此與大家分享下2013-11-11
如何實現(xiàn)動態(tài)刪除javascript函數(shù)
如何實現(xiàn)動態(tài)刪除javascript函數(shù)...2007-05-05
本文主要介紹了純JS實現(xiàn)彈性導(dǎo)航條效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03 
JavaScript中內(nèi)存泄漏的介紹與教程（推薦）
內(nèi)存泄露是指一塊被分配的內(nèi)存既不能使用，又不能回收，直到瀏覽器進程結(jié)束。下面這篇文章主要給的大家介紹了關(guān)于JavaScript中內(nèi)存泄漏的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-06-06