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

HTML DOM Insオブジェクトとは?作成方法とプロパティをわかりやすく解説

HTML DOMのInsオブジェクトは、HTML文書内の <ins> 要素を表すオブジェクトです。<ins> 要素は、文書に後から挿入されたテキスト(追記・追加部分)を示すために使用され、多くのブラウザでは下線付きで表示されます。

Insオブジェクトの作成方法

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

document.createElement("INS");

Insオブジェクトの主なプロパティ

Insオブジェクトには、以下のプロパティが用意されています。

プロパティ説明
citeins要素の cite 属性の値を取得・変更します。cite属性には、その変更の理由を説明するドキュメントのURLを指定できます。
dateTimeins要素の dateTime 属性の値を取得・変更します。dateTime属性には、テキストを挿入した日時を「YYYY-MM-DDThh:mm:ss」形式で指定します。

それでは、Insオブジェクトの具体的な使用例を見てみましょう。

使用例

次のサンプルコードでは、ボタンをクリックすると <ins> 要素が動的に生成され、ページに追加されます。

<!DOCTYPE html>
<html>
<style>
    body {
        text-align: center;
        background-color: #fff;
        color: #0197F6;
    }
    h1 {
        color: #23CE6B;
    }
</style>
<body>
<h1>DOM ins Object Demo</h1>
<button onclick="createIns()" class="btn">Create an ins object</button>
<script>
    function createIns() {
        var insElement = document.createElement("INS");
        insElement.innerHTML = '私はHTMLの &lt;ins&gt; 要素です';
        document.body.appendChild(insElement);
    }
</script>
</body>
</html>

実行結果

HTML DOM Insオブジェクトとは?作成方法とプロパティをわかりやすく解説

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

Create an ins object」ボタンをクリックしてみましょう。

HTML DOM Insオブジェクトとは?作成方法とプロパティをわかりやすく解説

ボタンをクリックすると、JavaScriptの createIns() 関数が呼び出され、document.createElement("INS") によって新しいins要素が生成されます。その後、appendChild() メソッドによって body の末尾に追加され、「私はHTMLの <ins> 要素です」というテキストが挿入済みテキストとして表示されます。

このように、Insオブジェクトを使えば、JavaScriptから動的に挿入テキストを表現する要素を操作・生成することが可能です。変更履歴を明示したい文書や、編集履歴をユーザーに伝えたいコンテンツなどで活用できます。

  1. HTML DOM Insオブジェクトとは?作成方法とプロパティをわかりやすく解説

    HTML DOMのInsオブジェクトは、HTML文書内の <ins> 要素を表すオブジェクトです。<ins> 要素は、文書に後から挿入されたテキスト(追記・追加部分)を示すために使用され、多くのブラウザでは下線付きで表示されます。 Insオブジェクトの作成方法 Insオブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。 document.createElement(INS); Insオブジェクトの主なプロパティ Insオブジェクトには、以下のプロパティが用意されています。 プロパテ

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

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