DOMを使用してHTMLタグに追加すると文字列が変更される理由

Webページで閉じることができる動的ボックスを作成していて、 'onclick'機能を持つdivの場合はhtmlを変更しています。しかし、DOMを使ってコードを変更すると、それを変更している文字列が魔法のように変更されて誤って入力されてしまい、動作しなくなってしまいます。DOMを使用してHTMLタグに追加すると文字列が変更される理由

私は何を意味するかを示すためにコードを単純化しました。

<head> 
</head> 
<body> 
    <div id="test"></div> 
    <script> 
    document.getElementById('test').innerHTML = '<a onclick="document.getElementById("MYdiv").remove()">Close</a>' 
    </script> 
</body>

私はmydivにMYdiv変更、これを実行し、フロントにスペースを追加します。この問題を解決するために、文字列"MYdiv"を\'MYdiv\'に変更しましたが、すべてがうまくいくようですが、最初の方法が機能しなかった理由を知りたいと思います。あなたが知っている場合、または私は何かが不足している場合は私に教えてください！

ありがとうございます！ PSは現在クロムについてテスト中です。

出典

2017-01-05 AlexT

あなたがエスケープしない限り、矛盾する引用符があります。 – rlemon

http://stackoverflow.com/questions/7753448/how-do-i-escape-quotes-in-html-attribute-values –

<a onclick="document.getElementById("MYdiv").remove()">Close</a>

問題が見つかりました。ヒント：カラーコーディング。

解決方法：引用符を修正するか、インラインイベントハンドラを使用しないでください。

出典

2017-01-05 23:01:01

ありがとうございます、はい私は同意し、私はあなたのアドバイスに耳を傾けてイベントハンドラに変更するスクリプトタグ。（親divを閉じるクラスの名前）。しかし、私はこのことを知っているので、私はまだ喜んでいるので、私はこの間違いをもう一度しません！ – AlexT

<div id="test"></div> 
<div id="MYdiv">killme</div> 
<script> 
    var link = document.createElement('a'); 
    link.appendChild(document.createTextNode('close')); 
    link.onclick = function(ev){ 
     ev.preventDefault(); 
     document.getElementById('MYdiv').remove(); 
    }; 
    var el = document.getElementById('test'); 
    el.appendChild(link); 
</script>

出典

2017-01-05 23:24:52 jbolanos

ありがとう、私は助けていただきありがとうございます。しかし、私が述べたように、これらのdivは動的に作成されています。私はdivの名前を知っているので、このようなidをコーディングするとうまくいきません。また、それを動作させることは問題ではありませんでした、私はそれが働くようになったと述べたように、私は私の方法が/ not/workを知りたいと思っていました。 – AlexT

それを関数に変換し、その値を変数として渡します – jbolanos

DOMを使用してHTMLタグに追加すると文字列が変更される理由

答えて

関連する問題