jQueryでhtmlを出力について。

Question

いつもお世話になっております。
以下の様な<input>ボタンがあり、これをクリックするとhtmlタグを出力するようにjQueryを使って実装したのですが、出力される際にソースコードが見やすいよう改行されて出力したいですが、うまくいきません。

<input type="button" id="wrap-SalesSpace" class="UPButton" value="Wrap article,div tag / テンプレートの選択"></td>

<script>
// Wrap article,div tag / article,divタグ追加
	$('#wrap-SalesSpace').click(function(){
	  // Get selected text / 選択テキストを取得
	  var selText = $('#textarea').selection();

	  //$('#result').text($.selection('html'));
	  $('#textarea')
	    // <article><div class="SalesSpace"> を選択テキストの前に挿入
	    .selection('insert', {text: '<a name="order"><article><div class="SalesSpace">', mode: 'before'})
	    // 選択テキストを <!-- ここの中にhtmlソースコードを入力しましょう --> に置き換える（<!-- ここの中にhtmlソースコードを入力しましょう --> を選択状態に）
	    .selection('replace', {text: '<!-- 必ずこの中にhtmlソースコードを収めて下さい。 -->'})
	    // ">選択テキスト</a> を選択テキストの後に挿入
	    .selection('insert', {text: '</div></article>' , mode: 'after'});
	});
</script>

例えば、上記の<input>タグをクリックすると
以下の様に出力したい場合、どの様にすれば良いでしょうか？

<article>
<div class="SalesSpace">
<!-- ここの中にhtmlソースコードを入力しましょう -->
</div>
</article>

ご存じの方、ご教授よろしくお願い致します。

追記：以下のページを参考に作成しました。
http://madapaja.github.io/jquery.selection/ja_jp.html

Answer 1

        // <article><div class="SalesSpace"> を選択テキストの前に挿入
        .selection('insert', {text: '<a name="order"><article><div class="SalesSpace">', mode: 'before'})
        // 選択テキストを <!-- ここの中にhtmlソースコードを入力しましょう --> に置き換える（<!-- ここの中にhtmlソースコードを入力しましょう --> を選択状態に）
        .selection('replace', {text: '<!-- 必ずこの中にhtmlソースコードを収めて下さい。 -->'})
        // ">選択テキスト</a> を選択テキストの後に挿入
        .selection('insert', {text: '</div></article>' , mode: 'after'});

↑これをこう↓してみたら？

        // <article><div class="SalesSpace"> を選択テキストの前に挿入
        .selection('insert', {text: "<a name=\"order\"><article><div class=\"SalesSpace\">\n", mode: 'before'})
        // 選択テキストを <!-- ここの中にhtmlソースコードを入力しましょう --> に置き換える（<!-- ここの中にhtmlソースコードを入力しましょう --> を選択状態に）
        .selection('replace', {text: "<!-- 必ずこの中にhtmlソースコードを収めて下さい。 -->\n"})
        // ">選択テキスト</a> を選択テキストの後に挿入
        .selection('insert', {text: "</div></article>\n" , mode: 'after'});

Comments

[YuichiKataoka]

なるほど。
できました。回答ありがとうございました。