「JavaScript」createTextNodeメソッドでテキストノードを作成するサンプル

環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.62

関数
1.createTextNodeメソッド
変数 = document.createTextNode(文字);
引数は、文字を指定します。
戻り値はテキストノードです。
新しい Text ノードを生成します。このメソッドは HTML 文字をエスケープするのに利用できます。

2.appendChildメソッド
要素.appendChild(子ノード);
子ノードを追加します。
appendChild() は Node インターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<script>
function addTxtNode(text) {
//Textノード作成
var resTxt = document.createTextNode(text);
//cft要素取得
cft = document.getElementById("cft");
//子ノードを追加
cft.appendChild(resTxt);
}
</script>
<button onclick="addTxtNode('TOKYO');">都市</button>
<button onclick="addTxtNode(' YAMADA');">名前</button>
<button onclick="addTxtNode(' 21');"> 年齢</button>
<hr />
<p id="cft">情報:</p>
</body>
</html>
<!DOCTYPE html> <html> <body> <script> function addTxtNode(text) { //Textノード作成 var resTxt = document.createTextNode(text); //cft要素取得 cft = document.getElementById("cft"); //子ノードを追加 cft.appendChild(resTxt); } </script> <button onclick="addTxtNode('TOKYO');">都市</button> <button onclick="addTxtNode(' YAMADA');">名前</button> <button onclick="addTxtNode(' 21');"> 年齢</button> <hr /> <p id="cft">情報:</p> </body> </html>
<!DOCTYPE html>
<html>
<body>

<script>
function addTxtNode(text) {
   //Textノード作成
    var resTxt = document.createTextNode(text);
    //cft要素取得
   cft = document.getElementById("cft");
   //子ノードを追加
   cft.appendChild(resTxt);
}
</script>

 <button onclick="addTxtNode('TOKYO');">都市</button>
 <button onclick="addTxtNode(' YAMADA');">名前</button>
 <button onclick="addTxtNode(' 21');"> 年齢</button>
 <hr />
 
 <p id="cft">情報:</p>
</body>
</html>

実行結果

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
「都市」を押すと、「TOKYO」をテキストノードに入れます
「名前」を押すと、「 YAMADA」をテキストノードに入れます。
「年齢」を押すと、「 21」をテキストノードに入れます。
「都市」を押すと、「TOKYO」をテキストノードに入れます 「名前」を押すと、「 YAMADA」をテキストノードに入れます。 「年齢」を押すと、「 21」をテキストノードに入れます。
「都市」を押すと、「TOKYO」をテキストノードに入れます
「名前」を押すと、「 YAMADA」をテキストノードに入れます。
「年齢」を押すと、「 21」をテキストノードに入れます。

 

JavaScript

Posted by arkgame