テンプレートリテラルの使い方を教えてください。

実現したいこと

テンプレートリテラルに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であれば出力可能なのかと思っています。
何か方法がございましたら、ご教授いただけますと幸いです。

m.ts10806

2023/03/13 22:36 編集

テンプレートリテラルの練習でしたら課題要件変えた方が良いと思います。リテラル、つまり単なる文字列なので。

行動規範の内容に同意します

回答1件

ベストアンサー

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

int32_t

総合スコア20845

yambejp

2023/03/14 00:40

テンプレを利用するならこうした方が良いかも window.addEventListener('DOMContentLoaded', ()=>{ const template = document.querySelector('#t1'); document.body.appendChild(template.content.cloneNode(true)); });