XMLをHTMLにjQueryで読み込み、改行・リンクを貼ることができません

Question

XMLファイルをHTMLにjQueryで読み込みました。
XMLの見出しと本文を繰り返し表示はできています。
見出し２と本文２の箇所だけテキストにリンクを貼りたいと思い、<link>こちら</link>を追加しました。

結果、テキストは表示されるのですが、リンクが機能していません。
また、文章中に改行を入れたいと思い、XMLファイルに改行の
をいれても改行できません。

よろしくお願いたします。

javascripi

$(function() {
	$.ajax({
		url: 'text.xml',
		dataType: 'xml',
		success: function(data) {
			// NEWSページ

			var insertContents = '';
			$('item', data).each(function() {
				var thisItem = $(this);
                insertContents += '<li>';
				insertContents += '<h1>';
				insertContents += thisItem.children('見出し').text();
				insertContents += '</h1>';
				insertContents += '<h1>';
				insertContents += thisItem.children('見出し2').text();
				insertContents += '</h1>';
				insertContents += '<p>';
				insertContents += thisItem.children('本文').text();
				insertContents += '</p>';
				insertContents += '<p>';
				insertContents += thisItem.children('本文2').text();
                insertContents += '<a href="#' + thisItem.children('link').text() + '" target="_blank">';
                insertContents += '</a>';
				insertContents += '</p>';
                insertContents += '</li>';
			});
			$('.linkbox-news').append(insertContents);
		}
	});
});

XML

<?xml version="1.0" encoding="utf-8"?>
<news>
    <item>
        <見出し>〇〇〇〇</見出し>
        <本文>〇〇〇〇</本文>
    </item>
    <item>
        <見出し>〇〇〇〇</見出し>
        <本文>〇〇〇〇</本文>
    </item>
    <item>
        <見出し>〇〇〇〇</見出し>
        <本文>〇〇〇〇</本文>
    </item>
    <item>
        <見出し>〇〇〇〇</見出し>
        <本文>〇〇〇〇</本文>
    </item>
    <item>
        <見出し2>〇〇〇〇</見出し2>
        <本文2>〇〇〇〇<link>こちら</link>〇〇〇〇</本文2>
    </item>
</news>

Comments

[m.ts10806]

改行はHTML的にはbrタグにする必要があるのでそっちはともかく
「機能しない」だけでは分からないので、具体的にどのように「コード」が挿入されたのかデベロッパーツールで確認してみてください。

[fujiton]

ご指摘ありがとうございます。
XMLの改行したい箇所に
<本文>〇〇〇〇<改行></改行>〇〇〇〇</本文>
という形でタグを入れ、

insertContents += thisItem.children('改行').text();
insertContents += '<br>';

と追加しましたが、html結果は
<p>〇〇〇〇〇〇〇〇</p>
と表示され飛ばされるようです。

リンク箇所は
〇〇〇〇こちら〇〇〇〇
<a href="#" target="_blank"></a>
となり、リンクタグが後ろに付きました。

原因がお分かりでしたら回答をよろしくお願いします。

[m.ts10806]

質問は編集できますので適宜ご対応ください。
ただ、既にでた回答で解決ですね。
改行タグを使うこと、リンク文言を入れること。

Answer 1

結果、テキストは表示されるのですが、リンクが機能していません。

まず、aタグが空要素になっていますから、表示がされません。
次に、thisItemはitem要素なので、その子要素にlink要素はありません。孫要素です。

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

.children() | jQuery API Documentation

なお、改行については、補足欄でm.ts10806さんがご指摘された通りです。