jQueryのafterメソッドなのですが

Question

afterを使ってhtmlのタグをつけるときに

  <script>
var a = $(".after1");
a.after("<div class='test'></div>");

  </script>

と書くとできますが、HTML的に正しいのは(<div class="test"></div>のようにクラス名をダブルクオートで囲む書き方ですよね。
jQueryではafterに限らず似たような状況でhtmlタグを挿入したいときにはクラスをつけるときには原則的にダブルクオートの使用は禁止されているのでしょうか。

Comments

[kei344]

提示されたスクリプトではエラーが起きるので修正してください。

[yamagata_user]

a.afer("<div class='test'></div>");ですか？

[kei344]

デベロッパーツールでエラーが起きないことを確認してください。http://eng-entrance.com/javascript-display-error

[yamagata_user]

a.after("<div class="test"></div>");だと思います。

[defghi1977]

投稿する前に実際に動かして少なくとも質問以前のエラーが出ていないことを確認して下さいということです. 「afer」じゃなくて「after」ですよね？

[yamagata_user]

そうです。なので1つ前の返信でtを追加しました。

[defghi1977]

ですから「コメント返信に追加」じゃなくて「質問本文を修正」してほしいのです.

[yamagata_user]

質問文の編集ってできたんですね。失礼しました。修正しました。

[defghi1977]

でもそれだとエラーが出ますよ. もう少し落ち着いて.

[yamagata_user]

aは変数定義したオブジェクトなのでその定義も追加しました。

[defghi1977]

"<div class="aaa"></div>"じゃなくて"<div class='aaa'></div>"じゃないのですか？

[s8_chu]

この質問って「なんで`"<div class="aaa"></div>"`だとエラーなの？ぜったいに"<div class='aaa'></div>"じゃなきゃだめなの？」って質問なのでは？

[defghi1977]

最初のコードが「a.afer(<div class="aaa"></div>);」だったという経緯があります. 多分HTMLとJavaScriptのクォートの使い方に関する質問だとは思います.

[yamagata_user]

そうです。ソースコードも修正しました。たびたびすみません。。

Answer 1

HTMLではノードの属性名, 属性値を囲む場合"を使っても'を使っても構いません. 従って

<div class="aaa"></div>
<div class='aaa'></div>

のどちらを使っても良いのです. 但し"で囲った中に"が含まれる, もしくは'で囲った中に'が含まれるとHTML文法としてエラー(正しく解釈されない)になります.

<div class="aaa" title="タイトル"a""></div>
<div class='aaa' title='タイトル'a''></div>

そのため, (英語といった母国語等の影響により)HTML内に頻繁に'が現れる可能性がある場合, "で囲うことが推奨されることもあります. またPHP等の処理言語によっては"と'を使い分けるものもあり, その場合はまた条件が変わってきます.

NOTE:
HTMLには文字の実体(エンティティ)参照と呼ばれる仕組みもあり, "を"と, 'を'(39は'の文字コード)として表すことも出来ます. 従って, 先ほどのコードを

<div class="aaa" title="タイトル&quot;a&quot;"></div>
<div class='aaa' title='タイトル&#39;a&#39;'></div>

と書き換えることで"内に正しく「"文字」を挿入するすることも可能です.

---

さてこのHTMLコードをjQuery等で使う文字列として扱うことを考えましょう. JavaScriptでは"か'のどちらかで囲ったコードを文字列リテラルとして扱います. 従って次のコードは正しい内容です.

a.after('<div class="aaa"></div>');
a.after("<div class='aaa'></div>");

ここでもし, "と'の扱いを逆にしてしまうと

a.after('<div class='aaa'></div>');
a.after("<div class="aaa"></div>");

となり, 今度はJavaScriptとしての文字列の範囲が曖昧となりエラーとなります. この場合, 文字列内部の"と'とを\でエスケープすると正しい内容となります.

a.after('<div class=\'aaa\'></div>');
a.after("<div class=\"aaa\"></div>");

NOTE:
JavaScriptにもHTMLと同様に文字を文字コードで挿入する方法(\uXXXX)があります.

NOTE:
ES2015で導入されたテンプレートリテラルを用いると, 文字列の定義の際に引用符の代わりにアクサングラーブ「`」を使うことも出来ます.

a.after(`<div class='aaa'></div>`);
a.after(`<div class="aaa"></div>`);

Comments

[yamagata_user]

ありがとうございます。
jQueryの文法ミスだと思ってましたが、htmlのミスだったんですね。
自分なりに理解できたこととエラーを回避するための方法をまとめてみたのですが

・ダブルクオートとシングルクオートは原則的にどちらでもよい。

・ただしダブルクオートの中にダブルクオートやシングルクォートの中にシングルクォートは入れるのは禁止
　→ただしクオートの直前に「\」を入れれば区別されるのでダブルクオートの中にダブルクオートやシングルクォートの中にシングルクォートを使ってもよい

ということでしょうか。

[defghi1977]

概ねその見解で間違いありません. このような問題はプログラミング界隈ではお目にかかるもので, とにかくその文字列がどの世界(HTML?JavaScript?)かを意識することが大切です.

[yamagata_user]

そうなんですね。
HTMLでクラス名はダブルクオートで囲うのが今まで自分の中での常識だったのでかなり戸惑いました。
設計やコーディングするときは注意します。
このたびはありがとうございました。

[yamagata_user]

テンプレートリテラル・・調べたのですがよく理解できませんでした。
それを使うと「`」で囲ってもOKなんですね。
ありがとうございます。

[defghi1977]

無理して使うものでもないので, JavaScriptにはもう一つ逃げ道がある程度の認識でまずはOKです.
詳しくは https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings を見てもらうとして, またわからなければ質問すれば良いと思います.

Answer 2

テキストとしていれようとしているからおかしくなるのでは？
きちんとアペンドしていく意識をもてばクォーテーションで悩む必要はありません

<script>
$(function(){
  var a = $(".after1");
  a.after($("<div>").addClass("test").text("test"));
});
</script>

<a href="hoge" class="after1">hoge</a>
<a href="fuga" class="after1">fuga</a>
<a href="piyo" class="after2">piyo</a>