親要素からみて、〇番目の子要素として、タグを追加する方法を知りたく、質問させて貰いました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .err_msg{ color:red; margin-bottom:0; } #name_box{ margin:0; } </style> </head> <body> <h1>お問合せ画面</h1> <h2>お問合せ内容を入力してください</h2> <form method="post" action="#" name="input_form" class="form"> <p id="name_box">(必須)名前<input type="text" name="name"></p> <p>(必須)年齢<input type="text" size="5" name="age">歳</p> <p>好きな色 <input type="checkbox" name="color" value="red">赤 <input type="checkbox" name="color" value="green">緑 <input type="checkbox" name="color" value="blue">青 </p> <input type="submit" id="btn" value="送信"> </form> <script> document.addEventListener('DOMContentLoaded',function(){ document.forms.input_form.addEventListener('submit',function(e){ // if(user_name) console.log('ok'); e.preventDefault(); let form = document.getElementsByClassName('form'); let name_box = document.getElementById('name_box'); let name_err_msg = document.createElement('p'); console.log(name_box); name_err_msg.classList.add('err_msg'); let age_err_msg = document.createElement('p'); let err_msg = {}; let str_num; let user_name = this.name.value; let user_age = this.age.value; console.log(user_name); if(user_name == ''){ name_err_msg.textContent = '名前が入力されていません'; name_box.parentNode.insertBefore(name_err_msg, name_box.parentNode.firstChild); } if (str_num.match(/[^0-9]/g) // "", " ", " 1", "1a" をはじく。 // 単体では,"01" を通してしまう || parseInt(str_num, 10) + "" != str_num // "01", "1 " など0付き・スペース付き文字列をはじく。 // 単体では,スペースのみの文字列は通してしまう ) { age_err_msg.textContet = '年齢は数字のみ入力してください'; } }); }); </script> </body> </html>
こちらのコードにおきまして age_err_msg.textContet = '年齢は数字のみ入力してください';
「age_err_msg」を
p>(必須)年齢<input type="text" size="5" name="age">歳</p>
ここの一つ上に挿入したいと思っています。
「name_err_msg」の場合
name_box.parentNode.insertBefore(name_err_msg, name_box.parentNode.firstChild);
ここの「name_box.parentNode.firstChild」として、「firstChild」を指定し、名前の入力ボックスの上にエラーメッセージを表示することができましたが、最初や最後でない場合の要素の指定方法が分からなかった為、こちらの指定方法につきまして、教えて頂けましたら幸いです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/08/27 00:41
2019/08/27 03:07
退会済みユーザー
2019/08/27 03:14 編集
2019/08/27 03:26
退会済みユーザー
2019/08/27 03:36