jqueryを使ってHTMLタグの開始タグ、終了タグを個別に挿入したい

Question

やりたいこと

<a id="target_1"></a>
テキスト
<a id="target_2"></a>

<script>
 $('#piece_1').html('<h1>');
 $('#piece_2').html('</h1>');
</script>

このようにして

<a id="target_1"><h1></a>
テキスト
<a id="target_2"></h1></a>

テキストにaタグ内のタグを適用させたい

こうなってしまう

<a id="target_1">
 <h1></h1>
</a>
テキスト
<a id="target_2"></a>

調べても原因がいまいち分からなかったため詳しい方おられましたら教えていただきたいです。

自己解決しました

実装方法を変更して自己解決しました！
皆様お騒がせして大変申し訳ございませんでした。回答してくださりありがとうございます。

Answer 1

<a id="target_1"><h1></a>
テキスト
<a id="target_2"></h1></a>

これは明らかにおかしいので存在できないHTMLです

Comments

[hidetakamaru]

<img id="target_1">
テキスト
<img id="target_2">

<script>
$('#target_1').after('<h1>');
$('#target_2').after('</h1>');
</script>

これなら構文として間違ってなさそうなのですがダメでした

[yambejp]

<img id="target_1"><h1>
テキスト
<img id="target_2"></h1>
としたいのでしょうか？

$([$('#target_1').get(0).nextSibling,$('#target_2').get(0)]).wrapAll('<h1>');

考え方を転換してください。タグを挿入する場合は.html()などを利用するので
あまり処理が美しくありません。
DOMとして掴んでwrapAllするのが妥当です

Answer 2

<a id="target_1"><h1></a>
テキスト
<a id="target_2"></h1></a>

最終形が不適当です。<a>～<h1>～</a>～</h1>のような、タグが正しく入れ子になっていないHTMLは成立しませんので、ブラウザ側で適当に終了タグを補ってしまいます。

Comments

[maisumakun]

一時的であっても、DOM操作で<h1>だけ入った状態にすることはできません。

Answer 3

明らかに文法違反なので、
たとえコード上で実現できたとしても、
ブラウザの解釈上、
無理やり、後者の形で解釈されるので、
絶対に不可能です。
別の方向性で実装しましょう。

Answer 4

jQuery は well-formed markup しか対応していないはずです。

• 類似したマークアップ事例として IE で採用されていた conditional comment の議論を検索してみました。
  古い記事ですが、stack overflow insert IE conditional statement (comment) with jQuery?
  当時は $.browser のプロパティで判別する手法が回答されています。