テンプレートリテラルの練習でしたら課題要件変えた方が良いと思います。
リテラル、つまり単なる文字列なので。
実現したいこと
テンプレートリテラルにhtmlコードを記入し、それを出力をしたいです。
前提
テンプレートリテラルについて学習をしております。
テンプレートリテラルにhtmlの要素を記述し、それらが文字列として出力を行うことは出来ました。
しかしhtmlの要素として出力する方法がわかりません。
発生している問題・エラーメッセージ
index.html:23 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9</head> 10 11<body> 12 13 <script> 14 const template = ` 15 <a href=""> 16 <span class="btn"> 17 </span> 18 </a> 19`; 20 const body = document.querySelector("body"); 21 body.appendChild(template); 22 </script> 23</body> 24 25</html>
試したこと
creatTextNodeでテキストとして吐き出されることは確認しました。
エラーの文面のNodeではないとあるので、Nodeであれば出力可能なのかと思っています。
何か方法がございましたら、ご教授いただけますと幸いです。
回答1件
2
ベストアンサー
appendChild() には HTML ソースをパーズする機能はないので、そういう機能を持った関数を使いましょう。
js
1body.insertAdjacentHTML('beforeend', template);
この場合、<template> を使うのが相応しいかもしれません。
html
1<template id="t1"> 2 <a href=""> 3 <span class="btn"> 4 </span> 5 </a> 6</template> 7<script> 8const template = document.querySelector('#t1'); 9document.body.appendChild(template.content.cloneNode()); 10</script> 11</body>
投稿2023/03/13 15:04
編集2023/03/16 07:20
総合スコア18631
回答へのコメント
テンプレを利用するならこうした方が良いかも
window.addEventListener('DOMContentLoaded', ()=>{
const template = document.querySelector('#t1');
document.body.appendChild(template.content.cloneNode(true));
});
お返事遅くなり申し訳ございません！
お二人のおかげで無事に要素として出力することが出来ました！
知らない関数が山ほどあるので、とても勉強になりました。
ありがとうございます！
あなたの回答
tips
プレビュー
関連した質問
Q&A
GASで特定の列に更新があると自動で通知メールが飛ぶようにしたいが、rangeが定義されていないとエラーが出る
Q&A
[php][javascript]ボタンが押されたかどうかを検証するページを作りたい
Q&A
ボタンのcssが一部にしか効かない
Q&A
ハンバーガーメニューの挙動について（transitionが、もとに戻る時には適応されない）
Q&A
spring bootで新規登録機能を作成したい。
Q&A
CSS position: absolute が効きません
Q&A
Ajaxでフォームの内容をPHPに渡してPDFを作成し文字列を引き渡し、受け取った文字列をjavascriptでPDF化したい
Q&A