javascript .innerHTML 与 createElement() | setAttribute() 与 Direct*
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6783861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
.innerHTML vs. createElement() | setAttribute() vs. Direct*
提问by
I was told this was not "proper", I did not worry about it until I started getting a run-time error in IE9. Here is the code I need converted to use object properties. Why is innerHTML not considered best practice?
有人告诉我这不“正确”，直到我开始在 IE9 中遇到运行时错误时我才担心。这是我需要转换为使用对象属性的代码。为什么innerHTML不被认为是最佳实践？
var c=document.createElement('div');
c.innerHTML= '<a name="a1" class="b" href="' + d[2].value + '">' + d[1].value + '</a>';
采纳答案by Mike Samuel
It's strange that you're putting an Aelement inside an Aelement but the below should work.
奇怪的是，您将一个A元素放在一个A元素中，但下面的内容应该可以工作。
var c=document.createElement('a');
c.name = "a1";
c.className = "b";
c.href = d[2].value;
c.appendChild(document.createTextNode(d[1].value));
This assumes that d[1].valueis not known to be well formed HTML from a trusted source so it is likely to be more robust against XSS than the innerHTMLcode.
这假设d[1].value未知来自受信任来源的格式良好的 HTML，因此它可能比innerHTML代码对 XSS 更健壮。
回答by The Surrican
innerHTML is perfectly fine, you are just not using it correctly.
innerHTML 非常好，只是您没有正确使用它。
innerHTML targets the content of a tag. meaning what's between<a>and </a>
innerHTML 以标签的内容为目标。意思是介于<a>和之间</a>
you need to set your d[2].valuewith setAttribute and onlyd[1].valuewith innerHTML
你需要d[2].value使用 setAttribute设置你的 ，并且只需要d[1].value使用 innerHTML
this should be fine (untested)
这应该没问题（未经测试）
var c=document.createElement('a');
c.setAttribute("href",d[2].value);
c.setAttribute("name","a1");
c.setAttribute("class","b");
c.innerHTML = d[1].value;
check these references and examples for setAttribute(method) and innerHTML(property)
检查setAttribute（方法）和innerHTML（属性）的这些参考资料和示例
回答by legendofawesomeness
It looks like you are creating an anchor - by using document.createElement('a') - and then creating another anchor within it. So, basically your HTML is going to look like this:
看起来您正在创建一个锚点 - 通过使用 document.createElement('a') - 然后在其中创建另一个锚点。所以，基本上你的 HTML 看起来像这样：
<a>
<a href="www.google.com">Click Here</a>
</a>
This is not right. This is the reason why using innerHTML for anchors is not good. I think you should do it as follows:
这个不对。这就是为什么用innerHTML做anchors不好的原因。我认为你应该这样做：
c.setAttribute('class', 'signature');
c.setAttribute('href', 'xyz');
and so on.
等等。
You can also set the href and other attributes directly on the anchor using javascript. See http://www.w3schools.com/jsref/dom_obj_anchor.asp(Anchor object properties).
您还可以使用 javascript 直接在锚点上设置 href 和其他属性。请参阅http://www.w3schools.com/jsref/dom_obj_anchor.asp（锚对象属性）。
