Webwide is the inclusive discussion community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. Creating an account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

Solved Assembling HTML in vanilla JS?

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
672
Reaction score
613
Points
765
Location
United Kingdom
Local Time
Today, 23:35
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:

Gummibeer

Well-known member
Joined
Oct 5, 2019
Messages
712
Reaction score
552
Points
635
Age
26
Location
Hamburg, Germany
Local Time
Tomorrow, 00:35
Website
gummibeer.de
Last edited:
  • Like
Reactions: Adam

tiborsaas

New member
Joined
Oct 13, 2019
Messages
3
Reaction score
1
Points
3
Location
Budapest, Hungary
Local Time
Tomorrow, 00:35
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>`;
 

v1rtl

Member
Joined
Oct 10, 2019
Messages
13
Reaction score
9
Points
205
Location
Near Moscow
Local Time
Tomorrow, 02:35
Website
v1rtl.site
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