[Javascript] HTML要素の前後にコンテンツを追加・変更・削除する方法

HTML要素の前後にコンテンツを追加・変更・削除する方法はそれぞれ以下の通り

テキストを追加

HTML要素にテキストを追加するには、afterbegin、beforeend、beforebegin、afterendを使用する

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

		// 要素内の後尾に追加する場合
		element.insertAdjacentText('beforeend', '要素内の後尾');

		// 要素の直前に追加する場合
		element.insertAdjacentText('beforebegin', '要素の直前');

		// 要素内の直前に追加する場合
		element.insertAdjacentText('afterend', '要素の直後');
	});
</script>
<div>
        <!-- afterbeginはここ -->
	<div id="example">
                <!-- beforebeginはここ -->
		<p>もともとある文章</p>
                <!-- afterendはここ -->
	</div>
        <!-- beforeendはここ -->
</div>

テキストを変更

テキストを変更するにはtextContentで変更する

<script>
	document.addEventListener('DOMContentLoaded', function(){
		const element = document.getElementById('example');
		// 要素のテキストを確認
		if(element.textContent == 'オリジナル文章'){
			// 要素のテキストを変更
			element.textContent = '変更しました';
		}
	});
</script>

<div>
	<p id="example">オリジナル文章</p>
</div>

テキストを削除

テキストを削除するにはremoveを使用する

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

<div>
	<p id="example">コンテンツA</p><!-- ここが要素と一緒に削除される -->
	<p>コンテンツB</p>
</div>

子要素を削除する

対象の要素は残したいが、子要素だけは削除したい場合は、children().remove()を使用する

<script>
    $('ul').children().remove();
</script>
<ul>
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
</ul>

属性だけを削除する

要素は残したいがClassなどの属性だけを削除したい場合はremoveAttrを使用する

<script>
    $('p').removeAttr('class');
</script>
<p id="text" class="sample">サンプルテキスト</p> <!-- classだけ削除される、idは残る -->

特定のClassだけを削除する

要素内の特定のClassだけ削除したい場合はremoveClassを利用する

<script>
    $('p').removeClass('text');
</script>
<p class="sample text test">サンプルテキスト</p> <!-- text Classだけ削除される、その他のClassは残る -->