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

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

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

innerHTML 屬性用于獲取或替換 HTML 元素的內(nèi)容，語法為Object.innerHTML
其中1.Object是獲取的元素對象，如通過document.getElementById("ID")獲取的元素；2.注意書寫，innerHTML區(qū)分大小寫。
我們通過id="light"獲取<div> 元素，并將元素的內(nèi)容輸出和改變元素內(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>

通過id獲取h2標簽元素,并賦給變量mychar,然后使用innerHTML屬性，將獲取的h2標簽內(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是一種基于對象、事件驅(qū)動的簡單腳本語言，嵌入在HTML文檔中，由瀏覽器負責解釋和執(zhí)行，在網(wǎng)頁上產(chǎn)生動態(tài)的顯示效果并實現(xiàn)與用戶交互功能。</p>
<script type="text/javascript">
 var mychar= document.getElementById('icon');   ;
 document.write("原標題:"+mychar.innerHTML+"<br>"); //輸出原h(huán)2標簽內(nèi)容
 mychar.innerHTML="Hello world!";
 document.write("修改后的標題:"+mychar.innerHTML); //輸出修改后h2標簽內(nèi)容
</script>
</body>
</html>

總結(jié)

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

您可能感興趣的文章: