🚀 go-pugleaf

Wyczytałem, że tworzenie struktury dokumentu przez takie "html stringi"
jest złe:

data.forEach(function(entry) {
	$('#filelist').append(
        `<li class="list-group-item">
           <strong class="bundle-info">plik:
            <a href="${entry.URL}">${entry.OriginalName}</a>
           </strong> - <strong class="bundle-info">
           ${entry.Desc}</strong>
         </li>`
	}

I że powinno się obiektowo i w ogóle, zrobiłem tak:

data.forEach(function(entry) {
	let li = document.createElement('li');
	li.className = 'list-group-item';
	let strong = document.createElement('strong');
	strong.className = 'bundle-info';
	strong.appendChild(document.createTextNode('plik: '));
	let a = document.createElement('a');
	a.href = `${entry.URL}`;
	a.appendChild(document.createTextNode(`${entry.OriginalName}`));
	strong.appendChild(a);
	li.appendChild(strong);
	li.appendChild(document.createTextNode(' - '));
	strong = document.createElement('strong');
	strong.className = 'bundle-info';
	strong.appendChild(document.createTextNode(`${entry.Desc}`));
	li.appendChild(strong);
	frag.appendChild(li);
});

I teraz się zastanawiam... po pierwsze zajęło mi to w pip więcej czasu, po
drugie jest to mniej jednak czytelne, bo za cholerę z tego kodu nie widzę
struktury, po trzecie jakiekolwiek zmiany będą wymagały rozkminy co w czym
i pod czym siedzi... czy naprawdę tak się robi czy coś źle mi się
zrozumiało? A jeśli tak się robi to może jest jakaś zgrabniejsza forma
zapisu niż tona zmiennych?

--
pozdrawiam
Roman Tyczka