Question

我有一个模板元素，用于创建<li> - 我页面上的元素。我可以设置该模板的内部元素的textContent属性。但是我无法在模板中设置父元素的id。

<template id="list-item">
  <li class="list-group-item">
    <div class="media-body">
      <strong class="list-item-text"></strong>
      <p class="list-item-text"></p>
    </div>
  </li>
</template>

<div id="output"></div>

这是证明问题的必要条件。

var template = document.querySelector('#list-item');
var listItem = document.importNode(template.content, true);
var lines = listItem.querySelectorAll('.list-item-text');

lines[0].textContent = 'title';
lines[1].textContent = 'description';
listItem.id = 5;

document.querySelector('#output').appendChild(listItem);

文本内容将被正确设置，但是根本不会设置id（js属性被创建，但它不会出现在DOM中。

我还为此创建了jsfiddle。

如何设置新添加元素的id？我目前的方法是避免使用模板，并使用字符串来构造元素，这让我觉得很脏。

Answer 1

问题是您尝试将document-fragment（listItem）作为DOM element处理。相反，您应首先从文档片段中获取/查询元素，如下所示：

var docFragment = document.importNode(template.content, true);
var listItem = docFragment.querySelector('li');

参见 working JSFiddle

另请参阅有关DocumentFragment here的文档。

Answer 2

您需要在listItem.querySelector()上使用document-fragment并更改ID：

listItem.querySelector("li").id = 5;

var template = document.querySelector('#list-item');
var listItem = document.importNode(template.content, true);
var lines = listItem.querySelectorAll('.list-item-text');

lines[0].textContent = 'title';
lines[1].textContent = 'description';
listItem.querySelector("li").id = 5;
document.querySelector('#output').appendChild(listItem);

在从模板元素

2 个答案: