javascript - `getElementById` 在 `<template>` 标签内找不到元素

Question

我要添加<li>至<ul>通过 JavaScript 标记:

const newLI = document.createElement("LI");
const ul = document.getElementById("tag_list");

ul.appendChild(newLI);
newLI.innerHTML = "<a href=\"dddaaaa\">" + json + "</a>";

<template id="box#add-feeds">
  <ul class="search-ac" id="tag_list" name="tag_list"></ul>
</template>

当我删除<template>时标签，此代码运行良好，但使用此标签时出现此错误:

TypeError: Cannot call method 'appendChild' of null

我无法删除 <template>标签，所以我必须更改 JavaScript 代码。知道为什么getElementById如果元素位于 <template> 中，则找不到该元素标签？

Answer 1

<template tag不是自定义标签；这是一项新的 HTML5 功能。

<template>的全部要点标签的缺点是它们实际上并不在文档中。
其中包括 ID。

您可以使用 content 检查或操作模板的内容<template>的属性(property)标签的 DOM 元素。