「JavaScript」createTextNodeメソッドで要素に設定するテキストを作成する
環境
Google Chrome 102.0.5005.63
書式
1.p要素を作成
var 変数名1= document.createElement(“p");
新たに要素を作成します。
2.テキストノードを作成します
var 変数名2 = document.createTextNode(“内容");
要素に設定するテキストを作成します。
3.pタグ要素にテキストノードを追加
変数名1.appendChild(変数名2);
使用例
<!DOCTYPE html>
<html>
<body>
<div id="cft">test abc</div>
<br>
<button onclick="funA()">検証</button>
<script>
function funA() {
// 追加先のdiv要素取得
var cft = document.getElementById("cft");
// pタグ要素を作成
var ptag= document.createElement("p");
// pタグ要素に内容を追加
var txtNode = document.createTextNode("study skill");
// pタグ要素にテキストノードを追加
ptag.appendChild(txtNode);
// DOMにpタグ要素を追加
cft.appendChild(ptag);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="cft">test abc</div>
<br>
<button onclick="funA()">検証</button>
<script>
function funA() {
// 追加先のdiv要素取得
var cft = document.getElementById("cft");
// pタグ要素を作成
var ptag= document.createElement("p");
// pタグ要素に内容を追加
var txtNode = document.createTextNode("study skill");
// pタグ要素にテキストノードを追加
ptag.appendChild(txtNode);
// DOMにpタグ要素を追加
cft.appendChild(ptag);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="cft">test abc</div>
<br>
<button onclick="funA()">検証</button>
<script>
function funA() {
// 追加先のdiv要素取得
var cft = document.getElementById("cft");
// pタグ要素を作成
var ptag= document.createElement("p");
// pタグ要素に内容を追加
var txtNode = document.createTextNode("study skill");
// pタグ要素にテキストノードを追加
ptag.appendChild(txtNode);
// DOMにpタグ要素を追加
cft.appendChild(ptag);
}
</script>
</body>
</html>
実行結果
「検証」ボタンを押下後、「<p>study skill</p>」を要素として追加します。