如何從 HTML 字串建立 DOM 元素（多種方法）

當我們需要建立簡單的動態 HTML DOM 元素時，我們可以使用 HTML 字串模板。在 JavaScript 中有很多不同的方法可以實現這一點，但我們可能有一些考慮。

---

內部HTML

const container = document.createElement('div');
container.innerHTML = `<div>Hello World</div>`;
const node = container.firstElementChild;

這是最常見的方法之一。將HTML字串插入到容器元素的innerHTML中，然後存取產生的DOM節點。

但是，它只能處理有效的 HTML 節點，也就是標準 HTML 結構中合法的元素。例如，如果您嘗試插入

；元素放入

中，則不會建立節點。

此外，該方法不會執行HTML字串中的任何腳本，這在處理不受信任的內容時更加安全。

innerHTML + 模板元素

const template = document.createElement('template');
template.innerHTML = `<div>Hello World</div>`;
const node = template.content.firstElementChild;

使用的優點標籤的優點是它沒有內容限制，可以包含任何類型的 HTML 結構，包括與表格相關的元素，例如

等。和。

插入相鄰HTML

const container = document.createElement("div");
container.insertAdjacentHTML("afterbegin", `<div>Hello World</div>`);
const node = container.firstElementChild;

此方法與innerHTML類似，只能處理有效的HTML節點。它也不會執行腳本。

DOM解析器

const node = new DOMParser().parseFromString(`<div>Hello World</div>`, "text/html").body.firstElementChild;

此方法透過建立完整的 HTML 文件來解析字串，然後從文件中提取節點。這意味著它比其他解決方案相對慢，不建議使用。

它只能處理有效的 HTML 節點，不會執行腳本。

Range.createContextualFragment

const node = document.createRange().createContextualFragment(`<div>Hello World</div>`).firstElementChild;

這個方法可能是最簡單的。預設它也只能處理有效的 HTML 節點。不過，我們可以設定上下文來避免這種情況。

請注意，它會執行 HTML 字串中的腳本，因此在處理不受信任的內容時要特別小心，例如使用 DOMPurify 等清理器。

結論

針對不同的情況，您可能需要選擇最適合您的方法。

如果您覺得我的內容有幫助，請考慮訂閱。我每天都會發送一份時事通訊，其中包含最新的網頁開發更新。感謝您的支持！

以上是如何從 HTML 字串建立 DOM 元素（多種方法）的詳細內容。更多資訊請關注PHP中文網其他相關文章！