在从模板元素创建的元素上设置一个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> 

这是要求的js来证明这个问题。

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

的问题是，你正在努力处理e document-fragment（listItem）作为DOM element。相反，你应该先把/从文档片段查询元素如下：

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

见working JSFiddle

而且，看文档中关于DocumentFragmenthere。

Answer 2

您需要使用的document-fragmentlistItem.querySelector()并更改其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);