<h2>フォーム</h2>
<form id="form01">
<input type="text" name="name">
</form>
<script>
$(function(){
$("#form01 [name='name']").blur(function(){
$(this).after('<p>aaaaa</p>');
});
});
</script>
ーカスアウト時に文字を追加、これだと追加されてしまう。
なので、フォーカス時に有れば消すという処理を入れる。
<form id="form02">
<input type="text" name="name"><p></p>
</form>
<script>
$(function(){
$("#form02 [name='name']").blur(function(){
$(this).next("p").text('aaaaa');
});
});
</script>
これはテキスト入力の次に空のＰタグを入れている。フォーカス時に次のＰタグの内容を.textで書き換えている。
ただ、これだと次にＰタグがあるのが前提になる。そこで、次の要素がＰか確認するなど処理を入れる。
<form id="form03">
<input type="text" name="name">
</form>
<script>
$(function(){
$("#form03 [name='name']").blur(function(){
if(!$(this).next("p").length){
$(this).after('<p>追加されたＰタグの中身</p>');
}
});
});
</script
>
(this).next(“p”).lengthで、有るか確認してなければ、afterで追加
<p id="click_re">クリックで消してみる</p>
<script>
$(function(){
$("#click_re").click(function(){
$("#form03 [name='name']").next("p").remove();
});
});
</script>
