Question

我正在开发Google Chrome扩展程序，我想通过JavaScript将<li>添加到<ul>代码：

var newLI = document.createElement("LI");
var ul = document.getElementById('tag_list');
ul.appendChild(newLI);
newLI.innerHTML = "<a href=\"dddaaaa\">" + json + "</a>";

和HTML：

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

当我删除<template>标记时，此代码效果很好但是使用此标记时出现此错误：

无法调用null
的方法'appendChild'

我无法删除模板标记，因此我必须更改JavaScript代码。如果标记位于自定义标记getElementById中，那么为什么<template>无效？

Answer 1

<template tag不是自定义标记;这是一个新的HTML5功能。

<template>标签的重点在于它们实际上并不在文档中这包括ID。

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

Answer 2

模板可供您克隆。

鉴于此 HTML 代码：

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

如果您尝试这样的操作，它将不工作（将返回 null）：

var ul = document.getElementById('tag_list'); // ul is *null*

方法是：

克隆模板（想想实例化一个类）。

让我在您的基本 html 中添加一个 div：

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

<div id="show_list"></div>   //div used as DOM-entry-point for our new created list

现在克隆模板：

var template= document.querySelector("#add-feeds");
my_template_clone = template.content.cloneNode(true); // clone the template 
var my_ul = my_template_clone.getElementById('tag_list'); //now you can find the *ul*

var newLI = document.createElement("LI"); //create random stuff
newLI.innerHTML="hello";
my_ul.appendChild(newLI);  //append it to the ul

var div = document.getElementById('show_list'); 
div.appendChild(my_ul); //now add it into the DOM

这里有一个有效的 jsfiddle

document.getElementById不适用于<template>自定义标记</template>

2 个答案: