javascritpでappendで要素追加すると、勝手にタグが閉じてしまいます。

###■やっかいなこと
指定要素「checkbox1」の直後に

<span>を入れたい。のに、

javascriptを使うと勝手に<input>タグが閉じてしまいます。

###■ダメだったこと
下記のように書くと、、、

html
1<label>
2  <input type="checkbox" class="checkbox1" />
3  チェック
4</label>

javascript
1<script>
2(function($){
3$(".checkbox1").append("<span class='checkbox1-naka'></span>");
4})(jQuery);
5</script>

なんとかcheckbox1の直後に<span>は入りました。が、

勝手に<input>のタグが閉じてしまい、困っております。

実際の動きはこちらです。
https://jsfiddle.net/nj3ss1a5/2/

inputが閉じないようにする書き方はございませんでしょうか？

行動規範の内容に同意します

回答2件

append()はタグの中に挿入するメソッドなので、<input> の後に追加したい場合は$(セレクタ).after(要素やHTML)を使用します。

js
1//改行はスペース1文字分、閉じタグは「<タグ名/>」でOK
2$(".checkbox1").after(" <span class='checkbox1-naka'/>");
3//上記と同じ
4//$(".checkbox1").after("\n<span class='checkbox1-naka'></span>");

before(), prepend(), append(), after()が基本です。ターゲット要素の該当位置にHTML要素を追加するとい意味になります。

$(ターゲット).上記メソッド(HTML要素);

似たようなメソッドでinsertBefore(), prependTo(), appendTo(), insertAfter()のようなメソッドもあります。これらは、上記基本のメソッドとそれぞれ ターゲット と HTML要素 を逆に書くことができ、HTML要素をターゲット要素の該当位置に追加するという意味になります。

$(HTML要素).上記メソッド(ターゲット);

html
1<!-- ← before(), insertBefore() -->
2<div>
3  <!-- ← prepend(), prependTo() -->
4  <p>HTML</p>
5  <!-- ← append(), appendTo() -->
6</div>
7<!-- ← after(), insertAfter() -->

投稿2018/01/31 18:39

Tomak

総合スコア1652

退会済みユーザー

2018/01/31 23:40

おお、またまたお詳しいご説明を誠にありがとうございます。その４つが基本なのですか！なるほどなるほど。要素に入れるjavascript、マスター致しましたー！(''◇'')ゞどうもありがとうございます。

退会済みユーザー

2018/01/31 23:58 編集

さらに「wrapInner」も覚えました★が、、次のような場合、どうすればいいか、お分かりになりませんでしょうか？ https://jsfiddle.net/wt5t6kne/ そうなんです。テキストエリアの内容を「response」に反映させているのですけれど、そのタイミングで<p>タグを入れようとすると、なぜか入ってくれないのです。(´；ω；`)ｳｩｩ「after」や「before」だと「response」の外に出てしまいますし…

Tomak

2018/02/02 07:22

下記URLにコメントを入れておきました。イベントについて慣れていないでしょうか？どのようなアプリを作るにしてもイベントは必ず出てきますので慣れておきましょう。 ---- https://jsfiddle.net/74nchstd/ ■初期イベント・ロード時、読み込み時に発生。・JavaScriptソースコードをブラウザに読み込み時に1度だけ発生するイベント。・グローバルスコープの「var 変数 = 内容;」などのコードはすべてこの時に実行される。・「$("#response").wrapInner("<p></p>");」の箇所は初期読み込み時に1回しか実行されない ■keyupなどのユーザー操作イベント・ユーザーがマウス、キーボード、画面タッチなどを行った時に毎回発生するイベント。・イベントが発生するたびに何かの処理を行いたい場合は、イベントリスナー関数を指定の要素に追加する。・今回はテキストエリア要素に3つのイベントリスナー関数を登録している。 ■イベントバブリング（余談）・イベントリスナーが親要素に登録されている場合は、子要素の存在可否に関わらずイベントを捕まえることが可能。（イベントバブリング：イベントはbodyまでバブルアップします）・例えば、Ajaxで要素を挿入する場合最初は空なので指定要素にイベントリスナーは追加できません。しかし、親要素に追加しておけば子要素のイベントを拾うことができます。

行動規範の内容に同意します