cloneNode(true)以降が動いていないようにみえる。

テンプレートタグの使い方を模索中なのですが
まず表示する方法がよくわかりません

<head></head>
<html>
    <header>
        <h1>????????</h1>
    </header>
    <body>
        <template id="temp1">
        <div id="example">
            <form name="myform" onsubmit="checkText()">
                <textarea id="sinen"></textarea>
                <input id="sinen" type="button" value="????" method="submit" action="/sinen"></input>
            </form>
            <h3 id="sinen"><h3>
                <script>
                     function checkText() {
 
                        //入力ボック　を　const で表示
                       // const container = document.getElementById("container");
                        //const template = document.getElementById("template");
                        document.getElementById("sinen").innerHTML
                </script>
        </div>
        </template>
            <script>
                document.write("Hello world!!の１\n");
                    const template = document.getElementsByTagName("temp1");
                    //const content = template.content;
                    document.write("Hello world!!の２");
                    const firstClone = template.content.cloneNode(true);
                    document.write("Hello world!!");
                    document.body.appendChild(firstClone);
                    //const example = content.getElementById('example');
                    </script>
    </body>
    <footer></footer>
</html>

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

回答2件

document.writeと一般的なDOM動作は、併用が困難です。

<template>を使うような操作をするのであれば、document.writeを使うべきではありません。

投稿2021/08/06 04:06

maisumakun

総合スコア146063

Bolshikh_i_mal

2021/08/06 04:23

document.writeがなくても<template>が動いてないのは別の問題ってことでしょうか？

maisumakun

2021/08/06 04:25

function checkText() {の閉じカッコもありませんし、他のところもおかしいかもしれません。（ブラウザのコンソールにエラーは出ていませんか？）

Bolshikh_i_mal

2021/08/06 06:20

気が付きませんでした！！ありがとうございます。

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

ベストアンサー

const template = document.getElementsByTagName("temp1");

temp1というタグは存在しません
せめてこんな感じで

javascript
1const template = document.querySelector("#temp1");
2const clone1 = template.content.cloneNode(true);
3document.body.appendChild(clone1);
4const clone2 = document.importNode(template.content, true);
5document.body.appendChild(clone2);