在chrome擴展中添加到innerHTML的內容被修改

Question

我有這個JS代碼，它在tbody添加了一些HTML：

    thestring='<tr><td><input type="text" name="entry-'+s+'-api" value="'+getItem('entry-'+s+'-api')+' /></td><td><input type="text" name="entry-'+s+'-talk" value="'+getItem('entry-'+s+'-talk')+' /></td><td><input type="text" name="entry-'+s+'-url" value="'+getItem('entry-'+s+'-url')+' /></td></tr>';

    document.getElementById('table').innerHTML+=thestring;

有點長線，我知道...

因此，當我運行它時，正確地對此thestring進行了評估：

<input type="text" name="entry-0-api" value="http%3A%2F%2Flego.wikia.com%2Fapi.php /><<input type="text" name="entry-0-talk" value="User_talk%3AUltrasonicNXT /><input type="text" name="entry-0-url" value="http%3A%2F%2Flego.wikia.com%2Fwiki%2FUser_talk%3AUltrasonicNXT />

但是，這是要添加的內容：

<tr><td></td></tr>

那么剩下的去了哪里？

這是相關的HTML：

<form action="change.js" method="GET">
   <table>
      <tbody id="table">
      </tbody>
   </table>
</form>

Answer 1

value="'+getItem('entry-'+s+'-api')+' />

標記不正確。 屬性值無引號。 Chrome瀏覽器正在盡力清除錯誤。

但是，無論如何，您都不應該以這種方式構建標記字符串。 如果getItem值中包含任何HTML特殊字符，則它們將能夠泄漏到標記中。 如果其中任何內容來自不受信任的第三方，則此HTML注入不僅是錯誤，而且是安全漏洞。

document.getElementById('table').innerHTML+=thestring;

永遠不要這樣做。 這會將表的整個當前DOM轉換為HTML標記，添加到該字符串，然后將其全部解析回新對象，從而替換舊對象。 這很慢，並且會丟失所有未序列化為HTML的信息（例如事件處理程序或表單字段值）。

直接更改文檔的活動DOM節點比弄亂HTML標記要可靠得多。 這解決了兩個問題。 例如。：

var row= document.getElementById('table').insertRow(-1);
['api', 'talk', 'url'].forEach(function(prop) {
    var name= 'entry-'+s+'-'+prop;
    var input= document.createElement('input');
    input.type= 'text';
    input.name= name;
    input.value= getItem(name);
    row.insertCell(-1).appendChild(input);
});

Answer 2

<input type="text" name="entry-0-api" value="http%3A%2F%2Flego.wikia.com%2Fapi.php /><不正確。您錯過了<tr><td> （可能是症狀或疏忽），但您還具有未封閉的value屬性（似乎是原因 ）和多余的< （再次看起來像是症狀，因為不一致）。格式錯誤的數據會引起一些問題。