.innerHTML与createElement()| setAttribute()vs. Direct *

时间:2011-07-21 23:01:49

标签: javascript innerhtml

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

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

3 个答案:

答案 0 :(得分:5)

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(属性)的这些参考和示例

答案 1 :(得分:5)

奇怪的是,您在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更强大。

答案 2 :(得分:2)

看起来你正在创建一个锚 - 通过使用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(锚点对象属性)。