0

内にいくつかの HTML を追加するこの JS コードがありますtbody。

    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>
4

2 に答える 2

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

マークアップが正しくありません。属性値の終了引用符はありません。Chromeは間違いを一掃するために最善を尽くしています。

ただし、いずれの場合も、この方法でマークアップ文字列を作成するべきではありません。値にHTML特殊文字が含まれているgetItem場合、それらはマークアップにリークする可能性があります。そのコンテンツのいずれかが信頼できないサードパーティからのものである場合、このHTMLインジェクションはバグであるだけでなく、セキュリティホールでもあります。

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

これは絶対にしないでください。これにより、テーブルの現在のDOM全体がHTMLマークアップに変換され、その文字列に追加され、すべてが解析されて新しいオブジェクトに戻され、古いオブジェクトが置き換えられます。これは遅く、HTMLにシリアル化されない情報（イベントハンドラーやフォームフィールド値など）が失われます。

HTMLマークアップをいじるよりも、ドキュメントのライブDOMノードを直接変更する方がはるかに信頼性が高くなります。これにより、両方の問題が修正されます。例えば。：

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);
});
于 2012-09-22T12:06:39.030 に答える
1

<input type="text" name="entry-0-api" value="http%3A%2F%2Flego.wikia.com%2Fapi.php /><は正しくありません。<tr><td>(症状または見落としのいずれか) がありませんが、閉じられていないvalue属性 (原因のように見えます) と余分な属性 (<矛盾しているため、これも症状のように見えます) があります。不正なデータは、いくつかの問題を引き起こします。

于 2012-09-22T12:02:50.560 に答える