jQueryについて

Question

jQueryでappendを使うときの質問です。

$('#aaa').append('<h1 ID="bbb">bbb<h1>')
という構文を書いた後に

$('#bbb').append('<h1>ccc<h1>')
という構文を書いて

bbb
ccc

と表示させたいのですがうまくいきません。
appendで追加したタグを用いて
再度appendで追加することはできないのでしょうか？

何か代わりの方法があれば教えてください。

すみません、２点は書き間違いでした。
appendで追加したhtml内のIDを用いて
再度appendでcccを追加できるのかをお聞きしたいです。

Comments

[kei344]

回答が付いた質問の編集は慎重に行ってください。画面右上の「2016/06/20 04：36 編集」というボタンを押すと編集履歴を見れます。そこから過去の投稿を確認できるので、それを使って記事を復元してください。

Answer 1

2点書き方に誤りがあると思います。

1. セレクタの記述について

<div id="aaa"></div>

という要素は

$('#aaa')

と記述することで取得できます。

2. append()の引数の記述について

append()の引数はHTMLで記述します。

append('<h1 id="bbb">bbb</h1>') 

Answer 2

質問に誤りがあった場合でも書き換えるのではなく追記されたほうが良いと思います。
実際現在の質問とTAKA_0921さんの回答が噛み合わなくなっていて状況を把握するのに苦労しました。

---

ここから回答

appendで追加したhtml内のIDを用いて再度appendでcccを追加できるのか

できます。

以下の修正後のコードで私の環境でテストしました。
※両方ともh1の閉じが</h1>ではなく<h1>になっているのを修正していますが、<h1>のままでも'apeend'は実行されます。

$('#aaa').append('<h1 ID="bbb">bbb</h1>'); //①
$('#bbb').append('<h1>ccc</h1>'); //②
//※①と②の実行順が逆の場合は①のみ実行されます。

<!-- 元html -->
<div id="aaa"></div>

<!-- 結果(chromeデベロッパーツールで確認) -->
<div id="aaa">
<h1 id="bbb">bbb<h1>ccc</h1></h1>
</div>

もし修正後のコードでも想定通りになっていないのであれば、具体的にどう上手く行かないのかを追記されたほうが良いかと思います。

また質問文はおそらく例示のコードだと思いますので実際のコードを記載されるのも良いと思います。

---

余談ですが質問文のコードだと<h1>の中に<h1>を入れてしまうのでhtmlの文法上誤りがありますが、質問の本題ではないと思いますのでスルーしてテストしています。