是否有使用Javascript插入HTML塊的最佳實踐？

Question

所以，我的文檔中有一大堆HTML：

<div class="largecontainer">
    <div class="largeeditor"><textarea class="largetextarea"></textarea><div class="largepreview"></div></div>
<div class="largecontrols editcontrols">
    <input type="button" name="save" value="Save" class="saveeventbutton taskbuttons">
    <input type="button" name="delete" value="Delete" class="deletetaskbutton taskbuttons">
    <input type="button" name="contract" value="Contract" class="contractbutton taskbuttons">
    <input type="button" name="cancel" value="Cancel" class="cancelbutton taskbuttons">
</div>
<div class="largecontrols viewcontrols">
    <input type="button" name="edit" value="Edit" class="editbutton taskbuttons">
    <input type="button" name="contract" value="Contract" class="contractbutton taskbuttons">
</div>
<div class="fade"></div>

這個HTML什么都不做。 這不是內容。 它不是模板。 它與表示相關，但默認情況下，CSS設置為display: none ，在用戶按下按鈕並且某些Javascript關閉后更改。

我可以用<link>包含它，將它粘貼在一些<template>標簽之間，或者用我的Javascript加載它。

使用Javascript加載它似乎對我來說最吸引人，因為它不會使文檔與顯然不與內容相關的內容混亂，並且在它需要之前不會下載。

Answer 1

根據您的應用程序架構，使用JavaScript處理HTML可能是可接受的並且是合適的。

但是，在完成嚴重依賴這種做法的應用程序后，我發現：

1. 在JavaScript代碼中讀取，編輯和修改html通常比較困難。 您是否正確關閉了所有元素和引用屬性？
2. 如果你沒有一個好的系統，找到html片段會更難。 對於不熟悉該應用程序的新開發人員來說，這更難。 在* .html文件中搜索html要容易得多。
3. 如果您在html頁面而不是腳本頁面中出現語法錯誤，代碼編輯器將為您提供更好的html提示。

如果您只是隱藏顯示內容，我寧願寫出兩個塊並使用JavaScript來修改css樣式以使這些元素可見。