JavaScriptからHTMLの動的な書き換えを行おうとしたが上手くいかず試行錯誤していたところ、不具合箇所を発見。
コードの該当部分は次のようなもの。
//JavaScriptのテストコード
function test(){document.getElementById("test").innerHTML = "<span>書き換えのテスト</span>";}
//HTML部分
<div id="test">
ここを書き換え</div>
<button onclick="test()" />
このHTMLをロードし、ボタンをクリックしてみると、対象のコンテンツが上書きされたかと思う間に初期状態に戻ってしまった。試しているうち、HTMLを次のように書き換えると問題なく動作することに気付いた。
//HTML部分(修正後)
<div id="test">
ここを書き換え</div>
<input type="button" onclick="test()" />
しかし修正前のbuttonタグを使用したパターンでも、コンポーネントがほぼ最小の状態であれば、きちんと動作していることは確認できた。
問題の起きたコードはもう少しhtmlやcssが入り組んだ状態ではあったが、それが関係しているのだろうか？
