【JavaScript】要素にテキストやコンテンツを追加・変更・削除する方法

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

要素に対してテキストを追加|insertAdjacentText()

insertAdjacentText()はElement のメソッドとなり、要素に対して指定した箇所にテキストを追加できます。

insertAdjacentText()では、第1引数に追加する場所を指定し、第2引数に追加するテキストを指定します。

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

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

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

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

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

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

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

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

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

要素の前後に追加する例

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

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

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

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

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

要素のテキストを取得・変更|textContent

textContentはNodeのプロパティとなり、指定した要素のテキストを取得できます。また、innerHTMLプロパティの値にテキストを指定することで、要素のテキストを変更できます。

以下の例では、idの値にexampleをもつ要素のテキストを確認して変更しています。

<script>
	document.addEventListener('DOMContentLoaded', function(){
		const element = document.getElementById('example');
		// 要素のテキストを確認
		if(element.textContent == 'サンプル'){
			// 要素のテキストを変更
			element.textContent = 'コンテンツを変更';
		}
	});
</script>

<div>
	<p id="example">サンプル</p>
</div>

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

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

要素に対してHTMLを追加|insertAdjacentHTML()

insertAdjacentHTML()はElement のメソッドとなり、要素に対して指定した箇所にHTMLを追加できます。

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>

要素内のHTMLを取得・変更|innerHTML

innerHTMLはElement のプロパティとなり、指定した要素内のHTMLを取得できます。また、innerHTMLプロパティの値にコンテンツを指定することで、要素内のコンテンツを変更できます。

以下の例では、idの値にexampleをもつ要素内のHTMLを変更しています。

<script>
	document.addEventListener('DOMContentLoaded', function(){
		const element = document.getElementById('example');
		// 要素内のHTMLを変更
		element.innerHTML = '<p>コンテンツを変更</p>';
	});
</script>

<div id="example">
	<p>サンプル</p>
</div>

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

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

insertAdjacentHTML()・innerHTMLのセキュリティリスク

insertAdjacentHTML()・innerHTMLではHTMLを書き換えることができるため、 XSS攻撃のセキュリティリスクがあります。詳しくは文末の参考サイトを確認しみてください。

要素を削除|remove()

remove()はChildNodeのメソッドとなり、指定した要素を削除します。

以下の例では、idの値にexampleをもつ要素を削除しています。

<script>
	document.addEventListener('DOMContentLoaded', function(){
		const element = document.getElementById('example');
		// 要素を削除
		element.remove();
	});
</script>

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

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

<div>	
	<p>コンテンツB</p>
</div>

参考サイトなど

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

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

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