【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>