<div class="container">
  <h2>textContentとinnerHTMLの違いを確認するサンプル</h2>

  <div id="text-content-example" class="example">
    &lt;strong&gt;この部分がエスケープされて表示されます&lt;/strong&gt;
  </div>
  <div id="inner-html-example" class="example">
    &lt;strong&gt;この部分は太字で表示されます&lt;/strong&gt;
  </div>

  <button id="change-text-btn">textContentとinnerHTMLを変更</button>

  <h2>スタイルとクラスの切り替えサンプル</h2>
  <div id="style-example" class="example">
    この背景色とフォントサイズが変わります
  </div>
  <button id="toggle-class-btn">クラスを切り替え</button>
</div>

.container {
  padding: 20px;
}

.example {
  padding: 10px;
  margin: 10px 0;
  background-color: #f0f0f0;
}

.highlight {
  background-color: yellow;
  font-size: 18px;
  color: red;
}

button {
  display: block;
  margin-top: 10px;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

document.getElementById('change-text-btn').addEventListener('click', function () {
  const textContentExample = document.getElementById('text-content-example');
  const innerHtmlExample = document.getElementById('inner-html-example');

  textContentExample.textContent = '<strong>この部分がエスケープされて表示されます</strong>';
  innerHtmlExample.innerHTML = '<strong>この部分は太字で表示されます</strong>';
});

document.getElementById('toggle-class-btn').addEventListener('click', function () {
  const styleExample = document.getElementById('style-example');
  styleExample.classList.toggle('highlight');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.