Festlegen einer ID für ein Element, das mit einem Vorlagenelement erstellt wurde

Question

Ich habe ein Vorlagenelement, das ich verwende, um <li> -Elemente auf meiner Seite zu erstellen. Ich kann die textContent-Attribute der inneren Elemente dieser Vorlage festlegen. Allerdings kann ich die ID für das Elternelement in der Vorlage nicht festlegen.

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

Und das ist die erforderliche js, um das Problem zu demonstrieren.

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

Text Inhalte korrekt sein, aber die ID nicht gesetzt werden (die js Attribut erstellt gesetzt wird, aber es im DOM nicht angezeigt.

Ich habe auch ein jsfiddle für diesen .

Wie kann ich die ID des neu angehängten Element? Mein aktueller Ansatz Vorlagen im allgemeinen und die Verwendung Strings ist, um zu vermeiden, um das Element zu konstruieren gesetzt, was mich. ist

Answer 1

das Problem schmutzig fühlen lässt, dass du versuchst zu greifen e a document-fragment (listItem) als DOM element. Stattdessen sollten Sie zuerst das Element aus dem Dokument-Fragment erhalten/Abfrage wie folgt:

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

working JSFiddle

Siehe auch, siehe Dokumentation über DocumentFragmenthere.

Answer 2

Sie müssen listItem.querySelector() auf dem document-fragment verwenden und die ID ändern dann:

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