.innerHTML 与 createElement() | setAttribute() 与直接*

Posted 2023-05-07

【中文标题】.innerHTML 与 createElement() | setAttribute() 与直接*

【英文标题】：.innerHTML vs. createElement() | setAttribute() vs. Direct*

【发布时间】：2011-10-10 15:54:59

【问题描述】：

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

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

【问题讨论】：

永远不要把 A 放在 A 里面 ;)

【参考方案1】：

奇怪的是，您将 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。

【讨论】：

“我拒绝你的现实，代之以我自己的。”

听说您喜欢 HTML，所以我锚定了您的锚点，以便您可以链接到您的链接。

@MikeSamuel LMAO！太搞笑了！

【参考方案2】：

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

innerHTML 以标签的内容为目标。表示在 <a> 和 </a> 之间

您需要使用 setAttribute 设置您的 d[2].value，仅 d[1].value 使用 innerHTML

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

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

【讨论】：

标准 HTML 属性不需要 setAttribute，只需设置 DOM 属性即可。它更可靠、更快。

感谢您提供的信息！当涉及到非标准 html 属性时，我不确定。

【参考方案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（锚对象属性）。