Assembling HTML in vanilla JS?

Adam

Mr. Webwide
Administrator
Local time
00:34
Joined
Sep 24, 2019
Messages
1,243
Pronouns
he/him

Hey everyone! You'll have to forgive me if this is a silly question. I have not tried to do something like this in JavaScript before. I am trying to convert from PHP so much. 😉

I am fetching data from external JSON (latest threads), looping through it and putting it in to page. That's all working well. There's just one line that's annoying me. Although it works it is very convoluted and going to be harder to make much more complex. I understand this is one of the problems frameworks solve but is there a better way in vanilla that will see me through this project?

JavaScript:
document.querySelector('#threads-list').innerHTML += '<a href="https://webwide.io/threads/' + element['thread_id'] + '" target="_blank"><div class="thread"><img src="' + avatar + '" alt="User Avatar"><div><div class="title">' + element['title'] + '</div><div class="meta">' + element['last_post_username'] + ' replied ' + timeSince(element['last_post_date']) + ' ago</div></div></div></a>';

Context:

 
Last edited:
Solution

That can be improved :) Use template strings for example:

Code:
document.querySelector('#threads-list').innerHTML += '<a href="https://webwide.io/threads/' + element['thread_id'] + '" target="_blank"><div class="thread"><img src="' + avatar + '"...

Gummibeer

Astroneer
Moderator
Local time
01:34
Joined
Oct 5, 2019
Messages
1,150
Pronouns
he/him
Last edited:

Adam

Mr. Webwide
Administrator
Local time
00:34
Joined
Sep 24, 2019
Messages
1,243
Pronouns
he/him

Perfect thanks guys! Similar to what I would have done in PHP just couldn't put a name to it to find. 😄

 

tiborsaas

New member
Local time
01:34
Joined
Oct 13, 2019
Messages
3

That can be improved :) Use template strings for example:

Code:
document.querySelector('#threads-list').innerHTML += '<a href="https://webwide.io/threads/' + element['thread_id'] + '" target="_blank"><div class="thread"><img src="' + avatar + '" alt="User Avatar"><div><div class="title">' + element['title'] + '</div><div class="meta">' + element['last_post_username'] + ' replied ' + timeSince(element['last_post_date']) + ' ago</div></div></div></a>';

JavaScript:
const {thread_id, title, last_post_username, last_post_date} = element;

document.querySelector('#threads-list').innerHTML += template;

`<a href="https://webwide.io/threads/${thread_id}" target="_blank">
<div class="thread">
    <img src="${avatar}" alt="User Avatar">
    <div>
       <div class="title">${title}</div>
       <div class="meta">${last_post_username} replied ${timeSince(last_post_date)} ago</div>
    </div>
</div></a>`;

 
Solution

v1rtl

teen webdev
Local time
02:34
Joined
Oct 10, 2019
Messages
25
Pronouns
bruh

My suggestion is not using innerHTML. You may get unexpected side effects.

I understand that not anyone will like it but why not use preact (or lit-html) + htm? rendering will be safe and easier to control

 
Top