概要
動的にロードした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がアペンドされてしまう。
以上になります。
よろしくお願いします。