HTML DOM Insオブジェクトとは?作成方法とプロパティをわかりやすく解説
HTML DOMのInsオブジェクトは、HTML文書内の <ins> 要素を表すオブジェクトです。<ins> 要素は、文書に後から挿入されたテキスト(追記・追加部分)を示すために使用され、多くのブラウザでは下線付きで表示されます。
Insオブジェクトの作成方法
Insオブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。
document.createElement("INS");
Insオブジェクトの主なプロパティ
Insオブジェクトには、以下のプロパティが用意されています。
| プロパティ | 説明 |
|---|---|
| cite | ins要素の cite 属性の値を取得・変更します。cite属性には、その変更の理由を説明するドキュメントのURLを指定できます。 |
| dateTime | ins要素の 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の <ins> 要素です';
document.body.appendChild(insElement);
}
</script>
</body>
</html>
実行結果

上記のコードを実行すると、このような画面が表示されます。
「Create an ins object」ボタンをクリックしてみましょう。

ボタンをクリックすると、JavaScriptの createIns() 関数が呼び出され、document.createElement("INS") によって新しいins要素が生成されます。その後、appendChild() メソッドによって body の末尾に追加され、「私はHTMLの <ins> 要素です」というテキストが挿入済みテキストとして表示されます。
このように、Insオブジェクトを使えば、JavaScriptから動的に挿入テキストを表現する要素を操作・生成することが可能です。変更履歴を明示したい文書や、編集履歴をユーザーに伝えたいコンテンツなどで活用できます。
-
HTML DOM Insオブジェクトとは?作成方法とプロパティをわかりやすく解説
HTML DOMのInsオブジェクトは、HTML文書内の <ins> 要素を表すオブジェクトです。<ins> 要素は、文書に後から挿入されたテキスト(追記・追加部分)を示すために使用され、多くのブラウザでは下線付きで表示されます。 Insオブジェクトの作成方法 Insオブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。 document.createElement(INS); Insオブジェクトの主なプロパティ Insオブジェクトには、以下のプロパティが用意されています。 プロパテ
-
HTML DOM Ulオブジェクトとは?<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>(順序なしリスト)要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注