Ustawianie identyfikatora elementu utworzonego na podstawie elementu szablonu

Question

Mam element szablonu, którego używam do tworzenia <li> -Elementy na mojej stronie. Mogę ustawić atrybuty textContent wewnętrznych elementów tego szablonu. Jednak nie mogę ustawić identyfikatora dla elementu nadrzędnego w szablonie.

<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> 

I to jest wymagany js do zademonstrowania problemu.

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); 

treści tekstowe zostaną ustawione prawidłowo, jednak id nie będzie ustawiony w ogóle (atrybut js zostanie utworzona, ale nie wydaje się w DOM.

ja też stworzył jsfiddle tego .

Jak mogę ustawić identyfikator nowo dodanym elemencie? Moje obecne podejście jest uniknięcie szablonów w ogóle i używać łańcuchów w celu skonstruowania element, który sprawia, że ​​czuję się brudny.

Answer 1

problem polega na tym, że próbujesz się uporać e a document-fragment (listItem) jako DOM element. Zamiast tego, należy najpierw uzyskać/kwerendy elementu z dokumentu fragment następująco:

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

Zobacz working JSFiddle

również zobaczyć dokumentację o DocumentFragmenthere.

Answer 2

Trzeba użyć listItem.querySelector() na document-fragment i zmienić id wtedy:

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);