外部ドメインのJSONファイルにまとめた外部のjavascriptを実行したい
xmlHttpRequestによるgetリクエストで取得したデータをdocument.writeで表示させると、元々のHTMLの内容が全て消えてしまいます。具体的には下記のようなコードを書きました。
https://aaaaaaaa.com/index.html
HTML
1<body> 2<p>こんにちはこんにちは!</p> 3<p>この下に画像が入ります</p> 4<script type="text/javascript"> 5image_id = "101"; 6</script> 7<script src="https://aaaaaaaa.com/imgswitch.js"></script> 8</body>
https://aaaaaaaa.com/imgswitch.js
javascript
1var imgurl = "https://xxxxxx.com/returnimage/" + image_id; 2var xmlHttpRequest = new XMLHttpRequest(); 3 4xmlHttpRequest.onreadystatechange = function() { 5 if (this.readyState === XMLHttpRequest.DONE && this.status == 200) { 6 if (this.response) { 7 var img = this.response.body; 8 //console.log(img); 9 document.write(img); 10 } 11 } 12} 13xmlHttpRequest.open('GET', imgurl, true); 14xmlHttpRequest.responseType = 'json'; 15xmlHttpRequest.send(null);
この時、理想としてはHTMLの「この下に画像が入ります」の下に画像のURLが入る事なのですが、
HTML
1<p>こんにちはこんにちは!</p> 2<p>この下に画像が入ります</p>
上記も全て消えてしまい、画像のurlだけが表示される状態になってしまいます。document.writeが全てのDOMを上書きしているっぽい事はわかり、類似の症状はネットで参考になるものもありました。ただし、基本的に空のdivタグ等を用意しておき、そこにinnerHTMLで挿入する解決策しか見つかりませんでした。
極力HTMLには触れずに、javascriptだけでなんとかしたいのですが、何か方法はないでしょうか?
何卒宜しくお願い致します。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。