在从模板元素创建的元素上设置id

Question

我有一个模板元素,用于<li>在我的页面上创建-Elements.我可以设置该模板的内部元素的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');

看看工作JSFiddle

另外,请参阅DocumentFragment 此处的文档.