快捷導(dǎo)航

javascript中innerHTML 獲取或替換html內(nèi)容的實(shí)現(xiàn)代碼

更新時(shí)間：2020年03月17日 09:43:47 作者：大灰牛博客

這篇文章主要介紹了javascript中innerHTML 獲取或替換html內(nèi)容,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

innerHTML 屬性用于獲取或替換 HTML 元素的內(nèi)容，語(yǔ)法為Object.innerHTML
其中1.Object是獲取的元素對(duì)象，如通過(guò)document.getElementById("ID")獲取的元素；2.注意書(shū)寫，innerHTML區(qū)分大小寫。
我們通過(guò)id="light"獲取<div> 元素，并將元素的內(nèi)容輸出和改變?cè)貎?nèi)容，代碼如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>innerHTML屬性</title>
 </head>
 <body>
  <div id="cshi">
   你好，黑夜20200317
  </div>
  <!-- <script type="text/javascript">
   var mylight=document.getElementById('light');
   document.write('原始內(nèi)容:'+mylight.innerHTML+'<br/>');//輸入元素內(nèi)容
   mylight.innerHTML='javascript tomorrow';//修改元素內(nèi)容
   document.write('替換內(nèi)容:'+mylight.innerHTML);
  </script> -->
  <script type="text/javascript">
   var mystr=document.getElementById('cshi');
   mystr.innerHTML="DOM操作";
   // document.write(mystr);
  </script>
 </body>
</html>

通過(guò)id獲取h2標(biāo)簽元素,并賦給變量mychar,然后使用innerHTML屬性，將獲取的h2標(biāo)簽內(nèi)容修改為"Hello world!"

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一種基于對(duì)象、事件驅(qū)動(dòng)的簡(jiǎn)單腳本語(yǔ)言，嵌入在HTML文檔中，由瀏覽器負(fù)責(zé)解釋和執(zhí)行，在網(wǎng)頁(yè)上產(chǎn)生動(dòng)態(tài)的顯示效果并實(shí)現(xiàn)與用戶交互功能。</p>
<script type="text/javascript">
 var mychar= document.getElementById('icon');   ;
 document.write("原標(biāo)題:"+mychar.innerHTML+"<br>"); //輸出原h(huán)2標(biāo)簽內(nèi)容
 mychar.innerHTML="Hello world!";
 document.write("修改后的標(biāo)題:"+mychar.innerHTML); //輸出修改后h2標(biāo)簽內(nèi)容
</script>
</body>
</html>

總結(jié)

到此這篇關(guān)于javascript中innerHTML 獲取或替換html內(nèi)容的文章就介紹到這了,更多相關(guān)js替換html內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: