將帶有純文本的 html 代碼作為屬性值放置是一個好習慣嗎？

Question

將文本和 html 代碼作為屬性的值被認為是好還是壞的做法，這里是一個例子：

<script>
  var name = '<h3>name</h3>Here goes a description about the name   attribute';
  var elem = document.getElementById('monElem');
  elem.innerHTML = name;
</script>

知道 html 標簽之間的文本是靜態文本而不是動態文本這一事實。 如果這是一個不好的做法，那么使用模板引擎的解決方案是什么？

Answer 1

除非您使用此代碼生成大量DOM 內容，即執行數百或數千次，否則您會很好。

為了完整起見，我想提一下，還有其他幾種從 Javascript 生成 HTML 內容的方法：

這三者的性能普遍高於使用innerHTML ，但目前三者之間的差異在瀏覽器和瀏覽器版本之間相當不一致。

此外， <template>尚未在所有瀏覽器中得到完全支持，舊瀏覽器也不支持。

Answer 2

如果目的是按需顯示/隱藏此靜態HTML ，那么最好不要在HTML文檔中動態添加和刪除它，而是通過CSS顯示/隱藏它：

<body>
    <div id="hoverMe" onmouseout="showHelp(0)" onmousemove="showHelp(1)">
        Hover me to learn about "name"
    </div>
    <div id="monElem" style="display:none">
        <h3>name</h3>
        Here goes a description about the name   attribute
    </div>
</body>

<script>
    var elem = document.getElementById('monElem');
    function showHelp(show) {
        elem.style.display = show ? '' : 'none';
    }
</script>

這也將比在需要時將元素添加到 DOM 具有更好的性能。

Answer 3

這取決於您團隊中的風格指南，但在大多數情況下，這是一種不好的做法。

更好的解決方案是當您通過 javascript 創建新元素時：

var h3 = document.createElement("h3");
var text = document.createTextNode("Any name … .");
h3.appendChild(text);

var elem = document.getElementById('monElem');    
elem.insertBefore(h3, elem.firstChild);

為什么更好？ 只是因為它更快、更方便、更可預測。

在 w3schools 上閱讀有關文檔方法的更多信息。

將帶有純文本的 html 代碼作為屬性值放置是一個好習慣嗎？

問題描述

3 個解決方案

解決方案1
0 2015-10-31 22:52:28

解決方案2
0 2015-10-31 23:35:42

解決方案3
-1 2015-10-31 22:53:23

將帶有純文本的 html 代碼作為屬性值放置是一個好習慣嗎？

問題描述

3 個解決方案

解決方案1 0 2015-10-31 22:52:28

解決方案2 0 2015-10-31 23:35:42

解決方案3 -1 2015-10-31 22:53:23

解決方案1
0 2015-10-31 22:52:28

解決方案2
0 2015-10-31 23:35:42

解決方案3
-1 2015-10-31 22:53:23