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

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. We understand that our community is one of creation which is why we, unlike many other discussion forums, encourage sharing of your own projects and content. Creating a forum account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Forum 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
1,156
Reaction score
1,180
Points
1,115
Location
United Kingdom
Local Time
Today, 08:12
Credits
10,581
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

Astroneer
Joined
Oct 5, 2019
Messages
1,068
Reaction score
893
Points
985
Age
27
Location
Hamburg, Germany
Local Time
Today, 09:12
Website
gummibeer.de
Credits
2,090
Real Name
Tom Witkowski
Last edited:
  • Like
Reactions: Adam

tiborsaas

New member
Joined
Oct 13, 2019
Messages
3
Reaction score
1
Points
3
Location
Budapest, Hungary
Local Time
Today, 09:12
Credits
0
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

teen webdev
Joined
Oct 10, 2019
Messages
23
Reaction score
21
Points
355
Location
Near Moscow
Local Time
Today, 10:12
Website
v1rtl.site
Credits
0
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