【保存版】JavaScriptでdivコンテンツを操作する6つの方法

2024-05-16

JavaScriptを使ってdivコンテンツを変更する方法

このチュートリアルでは、JavaScriptを使ってdiv要素のコンテンツを変更する方法を解説します。

方法

divコンテンツを変更するには、主に以下の2つの方法があります。

innerHTMLプロパティを使用する
textContentプロパティを使用する

innerHTMLプロパティは、要素内のHTMLコンテンツ全体を取得または設定するために使用されます。このプロパティを使用すると、要素内のすべての要素とテキストを置き換えることができます。

<div id="myDiv">元のコンテンツ</div>

const myDiv = document.getElementById('myDiv');
myDiv.innerHTML = '新しいコンテンツ';

上記のコードを実行すると、myDiv要素のコンテンツは「新しいコンテンツ」に変更されます。

textContentプロパティは、要素内のテキストコンテンツのみを取得または設定するために使用されます。このプロパティを使用すると、要素内のHTMLタグは保持されます。

<div id="myDiv">元のコンテンツ<span>太字</span></div>

const myDiv = document.getElementById('myDiv');
myDiv.textContent = '新しいコンテンツ';

補足

innerHTMLプロパティとtextContentプロパティのどちらを使用するかは、状況によって異なります。HTMLタグを保持する必要がある場合はtextContentプロパティを使用し、そうでない場合はinnerHTMLプロパティを使用するのが一般的です。

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <title>JavaScriptでdivコンテンツを変更する</title>
</head>
<body>
  <div id="myDiv">元のコンテンツ</div>
  <button onclick="changeContentWithInnerHTML()">innerHTMLで変更</button>
  <button onclick="changeContentWithTextContent()">textContentで変更</button>
  <script>
    function changeContentWithInnerHTML() {
      const myDiv = document.getElementById('myDiv');
      myDiv.innerHTML = '新しいコンテンツ <b>太字</b>';
    }

    function changeContentWithTextContent() {
      const myDiv = document.getElementById('myDiv');
      myDiv.textContent = '新しいコンテンツ 太字';
    }
  </script>
</body>
</html>

説明

上記のHTMLコードは、myDivというIDを持つdiv要素と、2つのボタンを作成します。
最初のボタンをクリックすると、changeContentWithInnerHTML関数が呼び出されます。この関数は、innerHTMLプロパティを使用してmyDiv要素のコンテンツを「新しいコンテンツ <b>太字</b>」に変更します。

実行結果

このコードを実行すると、以下のようになります。

最初は、myDiv要素のコンテンツは「元のコンテンツ」が表示されます。

このサンプルコードはあくまでも一例です。実際の状況に合わせて、コードを適宜変更する必要があります。

JavaScriptでdivコンテンツを変更するその他の方法

子要素を追加または削除することで、divコンテンツを変更することができます。

<div id="myDiv">
  <p>元のコンテンツ</p>
</div>

const myDiv = document.getElementById('myDiv');

// 子要素を追加
const newParagraph = document.createElement('p');
newParagraph.textContent = '新しいコンテンツ';
myDiv.appendChild(newParagraph);

// 子要素を削除
const oldParagraph = myDiv.querySelector('p');
myDiv.removeChild(oldParagraph);

属性を変更する

<div id="myDiv" data-content="元のコンテンツ"></div>

const myDiv = document.getElementById('myDiv');

// 属性を追加
myDiv.setAttribute('data-content', '新しいコンテンツ');

// 属性を削除
myDiv.removeAttribute('data-content');

スタイルを変更する

<div id="myDiv">元のコンテンツ</div>

const myDiv = document.getElementById('myDiv');

// 背景色を変更
myDiv.style.backgroundColor = 'red';

// フォントサイズを変更
myDiv.style.fontSize = '20px';

<div id="myDiv" class="old-class">元のコンテンツ</div>

const myDiv = document.getElementById('myDiv');

// クラスを追加
myDiv.classList.add('new-class');

// クラスを削除
myDiv.classList.remove('old-class');

テキストノードを直接操作する

<div id="myDiv">元のコンテンツ</div>

const myDiv = document.getElementById('myDiv');
const textNode = myDiv.childNodes[0]; // 最初のテキストノードを取得

// テキストコンテンツを変更
textNode.textContent = '新しいコンテンツ';

JavaScriptでdivコンテンツを変更するには、さまざまな方法があります。状況に合わせて、適切な方法を選択してください。

javascript html