jqueryのappend()でaタグを使ったリンクを表示させる際にaタグの外に文字列がきてしまう

Question

発生している問題・エラーメッセージ

for文で、liタグで複数個のHTMLを作成して代入をしているのですが
最初の項目のみリンクが適用されて、それ以降がaタグの後ろに文字列がきてしまうので
困ってます。

現状

代入後の画面のHTMLは以下のようになっている。

//1つ目は正常にaタグで囲ってくれている
<li>
	<div class="news_contents_img_wrap">
		<a target="_blank" href="aaa">
			<img class="news_contents_img" src="https://aaa.com/desc_dgr8337/?utm_campaign=google_jobs_apply&amp;utm_source=google_jobs_apply&amp;utm_medium=organic">
		</a>
	</div>
	<div class="news_contents_info_wrap">
		<a class="news_contents_info_title" target="_blank" href="aaa">
			test
		</a>
		<p class="news_contents_info_date">2021-07-09</p>
	</div>
</li>
//2つ目のliからaタグで画像や文字列を囲ってくれない
<li>
	<div class="news_contents_img_wrap">
		<a target="_blank" href="https://aaa.jp/DodaFront/View/JobSearchDetail/j_jid__3000512/-tab__jd/-fm__jobdetail"></a>
		<img class="news_contents_img" src="aaa">
	</div>
	<div class="news_contents_info_wrap">
		<a class="news_contents_info_title" target="_blank" href="aaa"></a>test2
		<p class="news_contents_info_date">2021-06-17</p>
	</div>
</li>

理想

<li>
	<div class="news_contents_img_wrap">
		<a target="_blank" href="aaa">
			<img class="news_contents_img" src="bbbb">
		</a>
	</div>
	<div class="news_contents_info_wrap">
		<a class="news_contents_info_title" target="_blank" href="aaa">
			test
		</a>
		<p class="news_contents_info_date">2021-07-09</p>
	</div>
</li>
<li>
	<div class="news_contents_img_wrap">
		<a target="_blank" href="aaa">
			<img class="news_contents_img" src="bbbb">
		</a>
	</div>
	<div class="news_contents_info_wrap">
		<a class="news_contents_info_title" target="_blank" href="aaa">
			test2
		</a>
		<p class="news_contents_info_date">2021-06-17</p>
	</div>
</li>

該当のソースコード

<div class="news_contents">
	<ul>
	</ul>
</div>

$(document).ready(function () {
	fetch("https://aaa.microcms.io/api/v1/news?limit=100", {
		headers: {
			"X-API-KEY": "aaaaaaaaaaaaaaaaaaaaaa",
		},
	})
		.then((json) => {
			var content = json.contents;
			for (var i = 0; i < content.length; i++) {
				var img = content[i].img.url;
				var title = content[i].title;
				var date = content[i].date;
				var link = content[i].link; 
				var news =
					"<li><div class='news_contents_img_wrap'><a target='_blank' href=" + link + "><img class='news_contents_img' src=" + img + "></a></div>" +
					"<div class='news_contents_info_wrap'><a class='news_contents_info_title' target='_blank' href=" + link + ">" + title + "</a>" +
					"<p class='news_contents_info_date'>" + date + "</p></div></li>"; 
				$(".news_contents ul").append(news);
			}
		})
});

試したこと

補足情報（FW/ツールのバージョンなど）

特になし

Comments

[itagagaki]

再現できませんでした。正常に動作しているようです。

<div class="news_contents">
<ul>
</ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
var content = [
{img:{url:'aaa'}, title:"test1", link:"aaa", date:"111"},
{img:{url:'bbb'}, title:"test2", link:"bbb", date:"222"},
{img:{url:'ccc'}, title:"test3", link:"ccc", date:"333"}
];
for (var i = 0; i < content.length; i++) {
var img = content[i].img.url;
var title = content[i].title;
var date = content[i].date;
var link = content[i].link;
var news =
"<li><div class='news_contents_img_wrap'><a target='_blank' href=" + link + "><img class='news_contents_img' src=" + img + "></a></div>" +
"<div class='news_contents_info_wrap'><a class='news_contents_info_title' target='_blank' href=" + link + ">" + title + "</a>" +
"<p class='news_contents_info_date'>" + date + "</p></div></li>";
$(".news_contents ul").append(news);
}
</script>

[hope_mucci]

apiから取得したlinkの文字列を可能な限り完全な形で補足してください（ドメイン名だけ隠すくらいで良いです。知りたいのは末尾の状態です。）
linkの一番最後が"/"になっていたりしないでしょうか？

[kaoru_tujimiya]

ありがとうございます！
linkの最後が、"/"担ってるのが原因でした。

[hope_mucci]

やはりそうでしたか。
もうBAはついていますが、ナレッジとして一応回答に記載しておきます。

Answer 1

問題文の追記・編集依頼より：

linkの一番最後が"/"になっていたりしないでしょうか？

→上記の通り、linkの末尾が "/"になっていて、

"<li><div class='news_contents_img_wrap'><a target='_blank' href=" + link + "><img

のうに、hrefをクォートで括っていなかったため、例えばlinkが/foo/bar/baz/だった場合、生成されたタグが
<a target='_blank' href=/foo/bar/baz/><img ... の様になり、<a target='_blank' href=/foo/bar/baz/> が<a target='_blank' href="/foo/bar/baz" />の様に単独のタグとして扱われているのが意図通りHTMLが生成されない原因となっていると考えられます。
このような場合は、テンプレート文字列を使うとミスも少なくなって効果的です。

news = `<li><div class='news_contents_img_wrap'><a target='_blank' href="${link}"><img src="${img}"> ... `;

上記の様に出力文字列をバッククォートで括り、変数の部分を${変数名}とすると変数が展開されて文字列に埋め込まれます。

Answer 2

<script>
window.addEventListener('DOMContentLoaded',async()=>{
  const ul=document.querySelector('.news_contents ul');
  const data=await fetch('x.json').then(res=>res.json());
  data.forEach(x=>{
    const li=document.createElement('li');
    const div_img=Object.assign(document.createElement('div'),{className:'news_contents_img_wrap'});
    const div_info=Object.assign(document.createElement('div'),{className:'news_contents_info_wrap'});
    const a_img=Object.assign(document.createElement('a'),{target:'_blank',href:x.img.url});
    const img=Object.assign(document.createElement('img'),{className:'news_contents_img',src:'bbb'});
    const a_info=Object.assign(document.createElement('a'),{className:'news_contents_info_title',target:'_blank',href:x.link,textContent:x.title});
    const p=Object.assign(document.createElement('a'),{className:'news_contents_info_date',textContent:x.date});
    [[ul,li],[li,div_img],[li,div_info],[div_img,a_img],[a_img,img],[div_info,a_info],[div_info,p]].forEach(x=>{
      x[0].appendChild(x[1]);
    });
  });
});
</script>
<div class="news_contents">
<ul>
</ul>
</div>