innerHTML

JavaScript入門

 
■概要
 
QuerySelectorで持ってきたオブジェクトの内容、内部HTMLコードをJavaScriptで変更できます。
 
■例

<html>
<head>
 <script type= “text/javascript”>
  function innerTest(){
   var randVal = document.getElementById(“rand-val”);
   randVal.innerHTML = “<b><font color=’red’>”+Math.random()+”</font></b>”;
  }
 </script>
</head>
<body>
 <div id=”rand-val”>ランダムな値を生成します</div>
 <button onclick=”innerTest()”>生成</button>
</body>
</html>

出力結果

ランダムな値を生成します

 
■outerHTML
innerHTMLと似てますが、選択されたノードを含めてHTMLを修正します。
 
 
■innerText & outerText
HTMLコードがテキストとして入力されます。
■例

<script type=”text/javascript”>
 function innerTxtTest(target) {
  target.innerText = ‘<strong>click</strong>’;
 }
</script>
<button onclick=”innerTxtTest(this)”>押す</button>

出力結果


 
 
 
 

当サイトは広告を含めています。広告のクリックによる収益は全て当サイトの管理、維持、コンテンツ製作に使われます。

 

Team ladybird
タイトルとURLをコピーしました