HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM HRオブジェクトとは？作成方法と使い方を解説

HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。

JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。

HRオブジェクトの作成方法（構文）

hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。

document.createElement("HR");

引数には要素名 "HR" を指定します。これにより、新しい <hr> 要素がメモリ上に生成され、その後 appendChild() などを使って DOM ツリーに追加できます。

HRオブジェクトの使用例

次のサンプルコードでは、「Create a hr object」というボタンをクリックすると、新しい水平線がページに動的に追加される仕組みを実装しています。

<!DOCTYPE html>
<html>
<style>
    body {
        text-align: center;
        background-color: #fff;
        color: #0197F6;
    }
    h1 {
        color: #23CE6B;
    }
    .btn {
        background-color: #fff;
        border: 2px solid #0197F6;
        height: 2rem;
        width: 40%;
        margin: 2rem auto;
        display: block;
        color: #0197F6;
        outline: none;
        cursor: pointer;
        border-radius: 20px;
    }
    hr {
        border-color: #db133a;
    }
</style>
<body>
<h1>DOM hr Object Demo</h1>
<button onclick="createHr()" class="btn">Create a hr object</button>
<script>
    function createHr() {
        var insElement = document.createElement("HR");
        document.body.appendChild(insElement);
    }
</script>
</body>
</html>

実行結果

コードを実行すると、以下のような画面が表示されます。

HTML DOM HRオブジェクトとは？作成方法と使い方を解説

「Create a hr object」ボタンをクリックしてください。クリックするたびに createHr() 関数が呼び出され、document.createElement("HR") によって新しい水平線が生成され、document.body.appendChild() によってページの末尾に追加されます。

ボタンをクリックした後の画面はこちらです。

HTML DOM HRオブジェクトとは？作成方法と使い方を解説

ポイントまとめ

  • document.createElement("HR") で新しい <hr> 要素を作成できる。
  • appendChild() を使うことで、作成した要素を任意の親ノードに追加できる。
  • ボタンの onclick イベントと組み合わせれば、ユーザーの操作に応じて動的にコンテンツを生成できる。
  1. HTML DOM dlオブジェクトとは？JavaScriptで記述リストを動的に作成する方法

    HTML DOM dlオブジェクトとはHTML DOMのdlオブジェクトは、HTMLの<dl>要素に関連付けられたオブジェクトです。<dl>要素は「記述リスト（description list）」を作成するためのもので、用語（<dt>）とその説明（<dd>）をセットで表現します。dlオブジェクトを利用することで、JavaScriptから<dl>要素を動的に生成したり、ページ内の既存の記述リストにアクセスして操作したりすることができます。構文記述リストを作成する場合の基本的な構文は以下の通りです。var p = document.cre

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注