Question

有人告诉我这不是“正确的”，直到我开始在IE9中遇到运行时错误，我才担心。这是我需要转换为使用对象属性的代码。为什么innerHTML不被认为是最佳实践？

  var c=document.createElement('div');
  c.innerHTML= '<a name="a1" class="b" href="' + d[2].value + '">' + d[1].value + '</a>';

Answer 1

innerHTML非常好，你只是没有正确使用它。

innerHTML以标记的内容为目标。意味着 <a>和</a>

之间的
您需要使用setHTML设置d[2].value使用setAttribute并 d[1].value

这应该没问题（未经测试）

var c=document.createElement('a'); c.setAttribute("href",d[2].value); c.setAttribute("name","a1"); c.setAttribute("class","b"); c.innerHTML = d[1].value;

检查setAttribute（方法）和innerHTML（属性）的这些参考和示例

Answer 2

奇怪的是，您在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));

这假设d[1].value不是来自受信任来源的格式良好的HTML，因此它可能比innerHTML代码对XSS更强大。

Answer 3

看起来你正在创建一个锚 - 通过使用document.createElement（'a'） - 然后在其中创建另一个锚。所以，基本上你的HTML看起来像这样：

<a>
    <a href="www.google.com">Click Here</a>
</a>

这是不对的。这就是为什么使用innerHTML作为锚点的原因并不好。我认为你应该这样做：

c.setAttribute('class', 'signature'); 
c.setAttribute('href', 'xyz');

等等。

您还可以使用javascript直接在锚点上设置href和其他属性。请参阅http://www.w3schools.com/jsref/dom_obj_anchor.asp（锚点对象属性）。

.innerHTML与createElement（）| setAttribute（）vs. Direct *

3 个答案: