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

Question

有人告訴我這不“正確”，直到我開始在 IE9 中遇到運行時錯誤，我才擔心它。 這是我需要轉換為使用 object 屬性的代碼。 為什么 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>之間的內容

你需要設置你的d[2].value與 setAttribute 和只有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 （屬性）的這些參考和示例

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 （錨 object 屬性）。