innerHTML、createTextNode、insertAdjacentText... 徹底比較！JavaScriptでdiv要素にテキストを追加する方法

2024-04-10

JavaScriptでdiv要素にテキストを追加するには、いくつかの方法があります。

方法

innerHTMLプロパティを使用する

これは最も簡単な方法です。innerHTMLプロパティは、要素の内容を取得または設定するために使用されます。

<div id="myDiv"></div>

const myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "Hello, world!";

document.createTextNode()を使用して、テキストノードを作成することができます。

<div id="myDiv"></div>

const myDiv = document.getElementById("myDiv");
const textNode = document.createTextNode("Hello, world!");
myDiv.appendChild(textNode);

Element.insertAdjacentText()を使用して、テキストノードを要素の特定の位置に挿入することができます。

<div id="myDiv"></div>

const myDiv = document.getElementById("myDiv");
myDiv.insertAdjacentText("beforeend", "Hello, world!");

テンプレートリテラルを使用して、動的にHTMLを生成することができます。

<div id="myDiv"></div>

const myDiv = document.getElementById("myDiv");
myDiv.innerHTML = `
  <h1>Hello, world!</h1>
  <p>This is some text.</p>
`;

補足

innerHTMLプロパティを使用する方法は簡単ですが、セキュリティ上のリスクがあります。ユーザー入力をそのままinnerHTMLプロパティに設定すると、クロスサイトスクリプティング（XSS）攻撃の脆弱性が発生する可能性があります。
Element.insertAdjacentText()を使用する方法は、比較的安全で簡単です。

<div id="myDiv"></div>

<button onclick="addText()">テキストを追加</button>

<script>
function addText() {
  const myDiv = document.getElementById("myDiv");
  myDiv.innerHTML = "Hello, world!";
}
</script>

<div id="myDiv"></div>

<button onclick="addText()">テキストを追加</button>

<script>
function addText() {
  const myDiv = document.getElementById("myDiv");
  const textNode = document.createTextNode("Hello, world!");
  myDiv.appendChild(textNode);
}
</script>

<div id="myDiv"></div>

<button onclick="addText()">テキストを追加</button>

<script>
function addText() {
  const myDiv = document.getElementById("myDiv");
  myDiv.insertAdjacentText("beforeend", "Hello, world!");
}
</script>

テンプレートリテラルを使用する

<div id="myDiv"></div>

<button onclick="addText()">テキストを追加</button>

<script>
function addText() {
  const myDiv = document.getElementById("myDiv");
  myDiv.innerHTML = `
  <h1>Hello, world!</h1>
  <p>This is some text.</p>
`;
}
</script>

実行方法

上記のコードをHTMLファイルに保存します。
ブラウザでファイルを開きます。
"テキストを追加"ボタンをクリックします。

結果

ボタンをクリックすると、div要素にテキストが追加されます。

JavaScriptでdiv要素にテキストを追加するその他の方法

<div id="myDiv"></div>

<button onclick="addText()">テキストを追加</button>

<script>
function addText() {
  const myDiv = document.getElementById("myDiv");
  const textNode = document.createTextNode("Hello, world!");
  myDiv.appendChild(textNode);
}
</script>

DocumentFragmentを使用して、複数の要素をまとめてDOMに追加することができます。

<div id="myDiv"></div>

<button onclick="addText()">テキストを追加</button>

<script>
function addText() {
  const myDiv = document.getElementById("myDiv");
  const fragment = document.createDocumentFragment();
  const h1 = document.createElement("h1");
  const p = document.createElement("p");
  h1.textContent = "Hello, world!";
  p.textContent = "This is some text.";
  fragment.appendChild(h1);
  fragment.appendChild(p);
  myDiv.appendChild(fragment);
}
</script>

jQueryを使用すると、JavaScriptでDOM操作を行うのがより簡単になります。

<div id="myDiv"></div>

<button onclick="addText()">テキストを追加</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
function addText() {
  $("#myDiv").text("Hello, world!");
}
</script>

Vue.jsなどのJavaScriptフレームワークを使用すると、より簡単に動的なHTMLを生成することができます。

<div id="app">
  <div v-text="message"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

<script>
const app = new Vue({
  el: "#app",
  data: {
    message: "Hello, world!"
  }
});
</script>