【JavaScript】要素にテキストやコンテンツを追加する方法|要素内・要素外

今回はJavaScriptで、指定したHTMLの要素に対して、テキストやコンテンツを追加する方法となります。

要素に対してコンテンツを追加する方法|insertAdjacentHTML()

insertAdjacentHTML()はElement オブジェクトのメソッドとなり、要素に対して指定した箇所に、テキストやコンテンツを追加できます。

insertAdjacentHTML()では、第1引数に追加する場所を指定し、第2引数に追加するコンテンツを指定します。

指定した要素に対して、追加できる場所は次の4箇所となります。

追加する場所第1引数の値
要素内の先頭'afterbegin'
要素内の後尾'beforeend'
要素の直前'beforebegin'
要素の直後'afterend'

以下、そのぞれのinsertAdjacentHTML()の例とます。

要素内の先頭・後尾に追加する例

以下の例では、idの値にexampleをもつ要素内の先頭と後尾に、コンテンツを追加しています。

<script>
	document.addEventListener('DOMContentLoaded', function(){
		const element = document.getElementById('example');
		// 要素内の先頭に追加する場合
		element.insertAdjacentHTML('afterbegin', '<p>要素内の先頭</p>');
		// 要素内の後尾に追加する場合
		element.insertAdjacentHTML('beforeend', '<p>要素内の後尾</p>');
	});
</script>

<div>
	<div id="example">
		<p>コンテンツ</p>
	</div>
</div>

上記の場合、HTMLは次のような出力となります。また、実際の出力結果は改行の箇所が異なります。

<div>
	<div id="example">
		<p>要素内の先頭</p>
		<p>コンテンツ</p>
		<p>要素内の後尾</p>
	</div>
</div>

要素の前後に追加する例

以下の例では、idの値にexampleをもつ要素の前後に、コンテンツを追加しています。

<script>
	document.addEventListener('DOMContentLoaded', function(){
		const element = document.getElementById('example');
		// 要素の直前に追加する場合
		element.insertAdjacentHTML('beforebegin', '<p>要素の直前</p>');
		// 要素内の直前に追加する場合
		element.insertAdjacentHTML('afterend', '<p>要素の直後</p>');
	});
</script>

<div>
	<div id="example">
		<p>コンテンツ</p>
	</div>
</div>

上記の場合、HTMLは次のような出力となります。また、実際の出力結果は改行の箇所が異なります。

<div>
	<p>要素の直前</p>
	<div id="example">
		<p>コンテンツ</p>
	</div>
	<p>要素の直後</p>
</div>

要素内を削除してコンテンツを追加(要素内を変更)|innerHTML

innerHTMLはElement オブジェクトのプロパティとなり、要素内を削除してコンテンツを追加できます。

innerHTMLプロパティでは、値に追加するコンテンツを指定することで、指定した要素内を変更できます。

また、要素内を削除してからコンテンツを追加するため、上記のinsertAdjacentHTML()より処理は遅くなります。

以下例となり、idの値にexampleをもつ要素内を削除してコンテンツを追加しています。

<script>
	document.addEventListener('DOMContentLoaded', function(){
		const element = document.getElementById('example');
		// 要素の直前に追加する場合
		element.innerHTML = '<p>コンテンツを変更</p>';
	});
</script>

<div id="example">
	<p>コンテンツ</p>
</div>

上記の場合、HTMLは次の出力となります。

<div id="example"><p>コンテンツを変更</p></div>

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。