Q&A
質問とは関係ないですが、ドメインが見えていますが問題ありませんか？
概要
動的にロードしたjs（非同期）の、レスポンス結果のDOMを任意の場所にアペンドしたい。
現象
非同期で処理される為、DOMのアペンド先が意図した場所にならない。
コード
html
1 <div> 2 // ここにレスポンスで返ってきたDOMを付与したい 3 <script src="script.js"></script> 4 </div>
script.js
javascript
1 var currentScript = $('script').last(); 2 var response = $('<script src="http://example.com/response.js"></script>'); 3 currentScript.after(response);
response.js
javascript
1// 何かしらの処理があり、DOMが生成されるとする。下記、テストDOM 2var elm = document.createElement('div'); 3var textNode = document.createTextNode ('this is additional DOM'); 4elm.id = 'additional'; 5elm.appendChild(textNode); 6 7// 現scriptタグの直前に、上記の生成されたDOMをアペンドする 8var current = document.currentScript; 9current.parentNode.insertBefore(elm, current) 10 11console.log('current: ', current) 12console.log('current.parentNode: ', current.parentNode) 13// ⇛ 非同期に処理が進むため、current.parentNode が 14// 期待する <div> ではなく <head> を指してしまう
結果
<head>にDOMがアペンドされてしまう。
以上になります。
よろしくお願いします。
回答2件
0
response.js の
var current = document.currentScript;
を
var current = currentScript.get(0);
に変えた時の動作は望んだものですか？
投稿2015/12/09 06:59
総合スコア790
0
全然動作確認していないので申し訳ないのですが、script.jsを呼んでいるscript要素にdefer属性を付けると上手くいったりしませんか？
投稿2015/11/25 11:13
総合スコア36057
あなたの回答
tips
プレビュー
