1. 程式人生 > 程式設計 >javascript中innerHTML 獲取或替換html內容的實現程式碼

javascript中innerHTML 獲取或替換html內容的實現程式碼

innerHTML 屬性用於獲取或替換 HTML 元素的內容,語法為Object.innerHTML
其中1.Object是獲取的元素物件,如通過document.getElementById("ID")獲取的元素;2.注意書寫,innerHTML區分大小寫。
我們通過id="light"獲取<div> 元素,並將元素的內容輸出和改變元素內容,程式碼如下:

<!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('原始內容:'+mylight.innerHTML+'<br/>');//輸入元素內容
   mylight.innerHTML='javascript tomorrow';//修改元素內容
   document.write('替換內容:'+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標籤內容修改為"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是一種基於物件、事件驅動的簡單指令碼語言,嵌入在HTML文件中,由瀏覽器負責解釋和執行,在網頁上產生動態的顯示效果並實現與使用者互動功能。</p>
<script type="text/javascript">
 var mychar= document.getElementById('icon');   ;
 document.write("原標題:"+mychar.innerHTML+"<br>"); //輸出原h2標籤內容
 mychar.innerHTML="Hello world!";
 document.write("修改後的標題:"+mychar.innerHTML); //輸出修改後h2標籤內容
</script>
</body>
</html>

總結

到此這篇關於javascript中innerHTML 獲取或替換html內容的文章就介紹到這了,更多相關js替換html內容內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!