textContent、innerText、innerHTML：違いは何？
JavaScriptで要素のテキストを変更する方法
textContent プロパティは、要素内のテキストノードの内容を取得または設定するために使用できます。
<h1 id="heading">Hello, world!</h1>
const heading = document.getElementById("heading");
heading.textContent = "こんにちは、世界！";
このコードは、<h1> 要素のテキスト内容を "Hello, world!" から "こんにちは、世界！" に変更します。
innerText プロパティは、textContent プロパティに似ていますが、空白文字も取得・設定します。
<p>This is some text with spaces.</p>
const paragraph = document.querySelector("p");
paragraph.innerText = "This is some text without spaces.";
このコードは、<p> 要素内のテキスト内容を "This is some text with spaces." から "This is some text without spaces." に変更します。
<div id="container">
<h1>Hello, world!</h1>
<p>This is some text.</p>
</div>
const container = document.getElementById("container");
container.innerHTML = "<h1>こんにちは、世界！</h1><p>これはいくつかのテキストです。</p>";
このコードは、#container 要素内のHTMLコードを "<h1>Hello, world!</h1><p>This is some text.</p>" から "<h1>こんにちは、世界！</h1><p>これはいくつかのテキストです。</p>" に変更します。
insertAdjacentHTML() メソッドは、要素の相対的な位置にHTMLコードを挿入するために使用できます。
<div id="container">
<h1>Hello, world!</h1>
</div>
const container = document.getElementById("container");
container.insertAdjacentHTML("beforeend", "<p>This is some text.</p>");
このコードは、#container 要素の末尾に <p>This is some text.</p> というHTMLコードを挿入します。
JavaScriptで要素のテキストを変更するには、textContent、innerText、innerHTML プロパティ、または insertAdjacentHTML() メソッドを使用できます。それぞれの方法には長所と短所があるので、状況に合わせて適切な方法を選択する必要があります。
textContent プロパティを使う
<h1 id="heading">Hello, world!</h1>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
const heading = document.getElementById("heading");
heading.textContent = "こんにちは、世界！";
}
</script>
innerText プロパティを使う
<p id="paragraph">This is some text with spaces.</p>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
const paragraph = document.getElementById("paragraph");
paragraph.innerText = "This is some text without spaces.";
}
</script>
innerHTML プロパティを使う
<div id="container">
<h1>Hello, world!</h1>
<p>This is some text.</p>
</div>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
const container = document.getElementById("container");
container.innerHTML = "<h1>こんにちは、世界！</h1><p>これはいくつかのテキストです。</p>";
}
</script>
insertAdjacentHTML() メソッドを使う
<div id="container">
<h1>Hello, world!</h1>
</div>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
const container = document.getElementById("container");
container.insertAdjacentHTML("beforeend", "<p>This is some text.</p>");
}
</script>
実行方法
これらのコードを実行するには、HTMLファイルとJavaScriptファイルが必要です。
- HTMLファイルにコードを保存します。
- JavaScriptファイルにコードを保存します。
- HTMLファイルをブラウザで開きます。
- "Change Text" ボタンをクリックします。
結果
ボタンをクリックすると、要素のテキスト内容が変更されます。
JavaScriptで要素のテキストを変更するには、いくつかの方法があります。それぞれの方法には長所と短所があるので、状況に合わせて適切な方法を選択する必要があります。
JavaScriptで要素のテキストを変更する他の方法
createTextNode() メソッドは、テキストノードを作成するために使用できます。
<h1 id="heading">Hello, world!</h1>
const heading = document.getElementById("heading");
const textNode = document.createTextNode("こんにちは、世界！");
heading.appendChild(textNode);
このコードは、<h1> 要素に "こんにちは、世界！" というテキストノードを追加します。
replaceChild() メソッドは、要素の子ノードを別のノードと置き換えるために使用できます。
<h1 id="heading">Hello, world!</h1>
const heading = document.getElementById("heading");
const newTextNode = document.createTextNode("こんにちは、世界！");
const oldTextNode = heading.firstChild;
heading.replaceChild(newTextNode, oldTextNode);
setAttribute() メソッドは、要素の属性を設定するために使用できます。
<h1 id="heading"></h1>
const heading = document.getElementById("heading");
heading.setAttribute("textContent", "こんにちは、世界！");
このコードは、<h1> 要素の textContent 属性を "こんにちは、世界！" に設定します。
javascript html
