在JavaScript中构建HTML的最佳实践

Question

Long story short, this right here seems incredibly wonky to me (not the actual code but the way it's written):

var B_ProgressBar = '<span style="border-style:solid;border-width:1px;background-color:#FFFFFF;width:100px;display:inline-block;" onmouseover="PBtext'
+ int + '.innerHTML=\'' + chaptersremaining + "/" + chapterstotal + '\';PBgreen' + int + '.style.width=\'' + chppercent + '%\'" onmouseout="PBtext'
+ int + '.innerHTML=\'' + Npercentage + '%\';PBgreen' + int + '.style.width=\'' + Npercentage + '%\'"><span id="PBgreen' + int
+ '" style="background-color:#01CA24;width:' + Npercentage + '%;display:inline-block;"><span id="PBtext' + int + '" style="display:inline-block;">'
+ Npercentage + '%</span></span></span>';

Lots of + and lots of escaped quotation marks.

I come from a Java world, where overuse of string concatenation is usually the last thing you want.

Yet it's the only solution I can think of for JS. I know frameworks like AngularJS and possibly jQuery take the nastiness out of such disgusting code using templates and inject the proper code without having to worry about missing a closing pointy bracket at some point.

Doesn't JS have some built-in functionality to build HTML blocks without having to resort to third party libraries? Something like an "Hypertext builder", which allows one to pass a couple parameters into a mask and the function spits out a nice, ready to use div block or something.

Think of prepared statements for SQL or printf() in C.

Answer 1

The answer is yes. The DOM (Document Object Model) is an API served for exactly this purpose.

As a first step, look into the following functions:

• createElement
• appendChild

These will allow you to create HTML elements, and append them to the DOM.

For more reading on the DOM, an essential subject to understand in Web development , read this: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

Last point I would recommend is to read MDN over W3 Schools, if you want an in depth analysis on how an API in JS works!

Answer 2

JavaScript supports Template Literals :

 var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); 

I would lean towards using DOM Manipulation and using createElement and friends rather then generating raw HTML though.