在JavaScript中構建HTML的最佳實踐

Question

長話短說，這對我來說似乎令人難以置信（不是實際的代碼，而是它的編寫方式）：

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>';

大量的+和大量的轉義引號。

我來自Java世界，過度使用字符串連接通常是你想要的最后一件事。

然而，這是我能為JS思考的唯一解決方案。 我知道像AngularJS和可能的jQuery這樣的框架會使用模板從這些令人作嘔的代碼中獲取骯臟並注入正確的代碼，而不必擔心在某些時候錯過了一個關閉尖括號。

JS是否有一些內置功能來構建HTML塊而不必訴諸第三方庫？ 像“超文本構建器”之類的東西，它允許一個人將一對參數傳遞給一個掩碼，並且該函數吐出一個漂亮的，准備使用的div塊或其他東西。

在C中考慮SQL或printf（）的預准備語句。

Answer 1

答案是肯定的。 DOM（文檔對象模型）是用於此目的的API。

作為第一步，請查看以下功能：

• 的createElement
• 使用appendChild

這些將允許您創建HTML元素，並將它們附加到DOM。

有關DOM的更多閱讀，這是Web開發中必不可少的主題 ，請閱讀： https ： //developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

如果你想深入分析JS中API的工作方式，我建議的最后一點是閱讀W3學校的MDN！

Answer 2

JavaScript支持模板文字 ：

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

我傾向於使用DOM操作並使用createElement和朋友，而不是生成原始HTML。