<!-- ボタン -->
<button id="btn" onclick="activateTemplate">実行する</button>

<!-- template -->
<template id="template">
  <div>挿入完了🎉</div>
  <script>alert('挿入されました!')</script>
</template>

// テンプレートを挿入する関数
const activateTemplate = () => {
  // ①templateコンテンツを取得
  const template = document.getElementById('template');
  const content = template.content;
  // ②コンテンツを複製する
  const clone = document.importNode(content, true);
  // ③今回はとくに変更しない
  // ④実際に挿入する
  document.body.appendChild(clone);
};

// ボタンがクリックされたときに実行
document.getElementById('btn').addEventListener('click', activateTemplate);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.