JavaScriptでページの特定の位置に文字を出力する

JavaScriptでページ内の特定の位置に文字を出力するコードを紹介。

 

JavaScriptでページ内の特定の位置に文字を出力する場合には、出力する位置にIDを設定したタグを配置し、IDをキーにしてタグの要素を取得します。取得したオブジェクトのinnerText, innerHTMLプロパティに値を代入することで、ページ内の指定した位置に文字列等を出力できます。

IDからそのIDが設定されている要素を取得するには、document.getElementById()メソッドを利用します。

 

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml"> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
   <title></title> 
   <script type="text/javascript"> 
     window.onload = function onLoad() { 
       target = document.getElementById("output"); 
       target.innerHTML = "Penguin";
     } 
   </script> 
   <style> 
    <!-- 
    .header-footer { 
      border: solid 1px #ff6a00; 
      background-color: #fffba9; 
    } 
    .contents { 
      margin-top:8px;  
      margin-bottom:8px; 
      text-align: center 
    } 
    --> 
    </style> 
</head> 
<body> 
    <div class="header-footer">ヘッダです</div> 
    <div class="contents" id="output"></div> 
    <div class="header-footer">フッタです</div> 
</body> 
</html>

解説

下記コードで windows.onloadイベントにonLoad()関数を割り当てることで、ウィンドウが表示された際にonLoad()関数を実行する動作にします。

window.onload = function onLoad() { 

documentオブジェクトのgetElementById()メソッドを呼び出し"output"というIDを持つタグ要素を取得します。今回のコードの場合はbodyタグに囲まれた"<div style="text-align:center" id="output"></div>"の要素が取得できます。

target = document.getElementById("output");

下記のコードで取得したdivタグの要素内に"Penguin"という文字列を挿入します。この処理により"output"というIDのタグの位置に文字列を表示できます。

target.innerHTML = "Penguin";

実行結果

HTMLファイルを表示します。ヘッダとフッタの間に配置した"output"のIDを持つdivタグ内に"Penguin"の文字列が表示されます。

表示結果のHTML
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function onLoad() {
            target = document.getElementById("output");
            target.innerHTML = "Penguin";
        }
    </script>
    <style>
      <!--
      .header-footer {
        border: solid 1px #ff6a00;
        background-color: #fffba9;
      }
      .contents {
        margin-top:8px;
        margin-bottom:8px;
        text-align: center
      }
      -->
    </style>
</head>
<body>
    <div class="header-footer">ヘッダです</div>
    <div class="contents" id="output">Penguin</div>
    <div class="header-footer">フッタです</div>


</body></html>

 

 




 

 

Twitterでフォローしよう

おすすめの記事