Q&A
解決済
総合スコア73
投稿2024/04/07 17:33
編集2024/04/08 14:37非同期通信で表示するコンテンツの順番を指定して、画像アイコン→名前の順番で表示したい。
画像アイコンの先に名前のコード後に書いても名前が先に表示されてしまう。
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>
指定要素のあとにノードを追加するコードを書いてみたのですが、変化がありませんでした。
divNamaePartialParts.insertBefore(usericonImg, divNamaePartialParts);
※参考サイト
https://so-zou.jp/web-app/tech/programming/javascript/dom/node/
回答2件
0
アドバイスお願い致します。
生成されたHTMLをデベロッパーツールで確認しましょう。
コードを書き換えて順番が変わらないなら、
などをまず確認してみてください。
投稿2024/04/07 18:09
総合スコア69643
0
自己解決
皆さまからたくさんのアドバイスを頂きました。ありがとうございます。
スタイルシート確認したところ float: left; で画像アイコンと名前が並ぶ形になっており、削除て画像アイコン→名前の順番で並べることが出来ました。
.board_form_partial
div#confirm_area
.namae-partial-parts p {
font-size: 200%;
font-weight: 700;
letter-spacing: .1em;
/* float: left; */
margin: 0 0 10px;
overflow: hidden;
text-align: left;
}
投稿2024/04/09 17:11
総合スコア73
あなたの回答
tips
プレビュー
