実現したいこと
非同期通信で表示するコンテンツの順番を指定して、画像アイコン→名前の順番で表示したい。
発生している問題・分からないこと
画像アイコンの先に名前のコード後に書いても名前が先に表示されてしまう。
divNamaePartialParts.appendChild(usericonImg); divNamaePartialParts.appendChild(child); // div (子要素) の末尾に child を追加
該当のソースコード
Javascript
1<script> 2 //非同期通信 3 fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt) 4 .then(response => { 5 //ボタンを使用可にしています「非同期通信が完了して応答があった時」の処理です。 6 submit_button.disabled = false; 7 //ボタンのクラスからwaitを削除しています(もとのボタンに戻ります) 8 submit_button.classList.remove('wait'); 9 return response.json(); 10 }) 11 .then(json => { 12 if (json.error != "") { 13 alert(json.error); 14 return; 15 } 16 namae_value = json.namae; 17 // 空文字を入れることで要素内を空にできる 18 confirm_area.textContent = ''; 19 var div; 20 var child; 21 22 const divNamaePartialParts = document.createElement("div"); // div (子)を生成 23 divNamaePartialParts.classList.add("namae-partial-parts"); // classの追加 24 child = document.createElement("p"); // p (孫)を生成 25 child.appendChild(document.createTextNode(namae_value)); //孫要素として Text ノードを生成 26 divNamaePartialParts.appendChild(child); // div (子要素) の末尾に child を追加 27 divNamaePartialParts.appendChild(usericonImg); 28 confirm_area.appendChild(divNamaePartialParts); // confirm_area (親要素) の末尾に div を追加 29 30 child = document.createElement("button"); // button (孫)を生成 31 child.type = "button"; 32 child.innerText = "入力画面へ戻る"; 33 child.addEventListener("click", () => { 34 input_area.style.display = "block"; 35 // 空文字を入れることで要素内を空にできる 36 confirm_area.textContent = ''; 37 confirm_area.style.display = "none"; 38 }); 39 divPostButton.appendChild(child); // div (子要素) の末尾に child を追加 40 child = document.createElement("button"); // button (孫)を生成 41 child.type = "button"; 42 //name属性の追加・変更 43 child.setAttribute("name", "output"); 44 child.innerText = "結果画面へ進む"; 45 child.addEventListener("click", confirm_button_click); 46 divPostButton.appendChild(child); // div (子要素) の末尾に child を追加 47 confirm_area.appendChild(divPostButton); // confirm_area (親要素) の末尾に div を追加 48 input_area.style.display = "none"; 49 confirm_area.style.display = "block"; 50 }) 51 .catch(error => { 52 console.log(error); 53 }); 54</script>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
指定要素のあとにノードを追加するコードを書いてみたのですが、変化がありませんでした。
divNamaePartialParts.insertBefore(usericonImg, divNamaePartialParts);
補足
※参考サイト
https://so-zou.jp/web-app/tech/programming/javascript/dom/node/
回答2件
あなたの回答
tips
プレビュー