使用html標籤vs javascript創建元素

我試圖抓住HTML和JavaScript，並想知道是否有使用document.createElement(some_tag)與<some tag></some tag>之間的功能差異。我可以看到如何使用JavaScript的創建元素可以很容易地在網站的不同頁面/部分中反覆創建特定元素（而不是複製和粘貼並使您的代碼體積龐大）。但是對於內存或者使用create元素的東西是不好的做法/不好的做法。使用html標籤vs javascript創建元素

例如，考慮下面的代碼：

function createhtml() { 
 
    var li1 = document.createElement("li"); 
 
    var text1 = document.createTextNode("First List Item"); 
 
    li1.appendChild(text1); 
 
    var ul1 = document.createElement("ul"); 
 
    ul1.appendChild(li1); 
 
    document.body.appendChild(ul1); 
 

 
}

<body onload="createhtml()"> 
 
</body>

是更好地做到這一點，或者乾脆：

<ul> 
 
    <li>First List Item </li> 
 
</ul>

或者是他們兩個完全一樣，第二個更容易/更快速的輸入。

來源

2017-02-18 Moe Chughtai

通過使用createElement編寫HTML節點，您不會獲得任何性能優勢，而且，如果您尚未注意到，編寫起來會更麻煩。 –

與DOM最大的區別在於。取決於何時運行代碼以及如何使用諸如createElement（）之類的東西，以便DOM知道這些更改。當您開始更多地使用JavaScript時，您可能會遇到嘗試處理某些內容的代碼，但由於DOM樹不知道該代碼而失敗。有些東西要查看，還要查看與DOM類似的事件冒泡。 – Blizzardengle

對於輸入的HTML，頁面將加載並且您的列表將可見。

對於JavaScript版本，頁面將加載，腳本將被解析並運行，然後列表將會顯示。

這是一個非常簡單的例子，但直線HTML會稍微更高效，對於靜態內容來說，更易於維護。

來源

2017-02-18 07:18:00 Paddy

我發現保持分開的事情會爲你節省很多挫折。在你的頁面上定義對象應該放在你的HTML中，樣式和動畫這些元素應該放在你的CSS中，並且讓東西做東西應該放在你的javascript中。當然，這不是一條硬性規定，但通過意圖保持事物分離使得它更容易閱讀，並且更容易找到你要找的東西。此外，爲了迴應哪種方法更快，預裝配的HTML將比試圖在js上動態組裝它更快。

TLDR;儘可能在HTML中創建元素。

來源

2017-02-18 07:21:07 RATKNUKKL

你的頁面/瀏覽器會：

繪製靜態HTML
去拿JavaScript和運行
重繪新元素到頁面

在您的例子在這裏這是一個用戶永遠不會注意的微不足道的事情，但是在更大的頁面上它可能會導致問題。 JavaScript方法在時間和處理效率方面效率也較低。

一般來說，當您必須生成可能會在頁面加載後發生更改的內容時（例如點擊內容，執行內容）或基於加載時出現的情況而使用JavaScript時（例如，從其他地方得到一些東西的清單）。靜態/不變材料最好是HTML。

來源

2017-02-18 07:32:42 Michael

對於你的例子，如果你知道之前使用靜態html標籤的元素數量是更好的選擇，因爲它會花費時間和內存追加到正文。

在其他情況下，如果您不知道要將多少元素附加到身體上，那麼您必須使用dom。您可以在開發人員工具「F12」時間線中看到要素的性能和記憶。

來源

2017-02-18 08:07:26

使用html標籤vs javascript創建元素

回答

相關問題