通过 DOM 函数附加新元素，或用 HTML 标签附加字符串，哪个更好? [英] What is better, appending new elements via DOM functions, or appending strings with HTML tags?
问题描述
我见过几种不同的方法来向 DOM 添加元素.例如，最流行的似乎是
I have seen a few different methods to add elements to the DOM. The most prevelent seem to be, for example, either
document.getElementById('foo').innerHTML ='<p>Here is a brand new paragraph!</p>';
或
newElement = document.createElement('p');
elementText = document.createTextNode('Here is a brand new parahraph!');
newElement.appendChild(elementText);
document.getElementById('foo').appendChild(newElement);
但我不确定做任何一个的好处.关于何时应该完成另一个任务，或者其中之一完全错误，是否有经验法则?
but I'm not sure of the advantages to doing either one. Is there a rule of thumb as to when one should be done over the other, or is one of these just flat out wrong?
推荐答案
一些注意事项:
使用
innerHTML在 IE 中更快，但在 chrome + firefox 中更慢.这是一个基准，用一组不断变化的<div>s +s;这里是一个基准，展示了一个恒定的、简单的.
Using
innerHTMLis faster in IE, but slower in chrome + firefox. Here's one benchmark showing this with a constantly varying set of<div>s +<p>s; here's a benchmark showing this for a constant, simple<table>.
另一方面，DOM 方法是传统的标准——
innerHTML在 HTML5 中是标准化的——并且允许您保留对新创建元素的引用，以便您可以稍后再修改.On the other hand, the DOM methods are the traditional standard --
innerHTMLis standardized in HTML5 -- and allow you to retain references to the newly created elements, so that you can modify them later.因为innerHTML 速度快(足够)、简洁且易于使用，所以很容易在每种情况下都依赖它.但请注意，使用
innerHTML会从文档中分离所有现有的 DOM 节点.这是您可以在此页面上测试的示例.Because innerHTML is fast (enough), concise, and easy to use, it's tempting to lean on it for every situation. But beware that using
innerHTMLdetaches all existing DOM nodes from the document. Here's an example you can test on this page.首先，让我们创建一个函数，让我们测试一个节点是否在页面上:
First, let's create a function that lets us test whether a node is on the page:
function contains(parent, descendant) { return Boolean(parent.compareDocumentPosition(descendant) & 16); }如果
parent包含descendant，这将返回true.像这样测试:This will return
trueifparentcontainsdescendant. Test it like this:var p = document.getElementById("portalLink") console.log(contains(document, p)); // true document.body.innerHTML += "<p>It's clobberin' time!</p>"; console.log(contains(document, p)); // false p = document.getElementById("portalLink") console.log(contains(document, p)); // true这将打印:
true false true看起来我们对
innerHTML的使用应该不会影响我们对portalLink元素的引用，但确实如此.它需要再次检索才能正确使用.It may not look like our use of
innerHTMLshould have affected our reference to theportalLinkelement, but it does. It needs to be retrieved again for proper use.这篇关于通过 DOM 函数附加新元素，或用 HTML 标签附加字符串，哪个更好?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆