JSでhtmlの生成と出力がしたい

こうできたらいいなというものがあり、投稿しました。

▼html
<ul>
[ここに生成されたhtmlが吐き出される]
</ul>

▼htmlテンプレ
<li class="①"><img src="②" alt=""><p>③</p><p>④</p>⑤</li>

▼文字列
['①クラス名','②画像パス','③テキスト','④テキスト','⑤ここは<a>タグがあったり、何もなかったり']

文字列を追加したらhtmlテンプレの①〜⑤の各場所に書き出され、
生成されたhtmlが吐き出されて追加するとリストが増えていく、、
というものは実装可能でしょうか・・

参考になりそうなページの情報でも助かります！
よろしくお願いいたします。

1T2R3M4

2021/07/22 19:37

https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14246504574 以下ご対応ください。 https://teratail.com/help#posted-otherservice

m.ts10806

2021/07/22 23:48

まず自身で思ったようにやってみては。

行動規範の内容に同意します

回答3件

ベストアンサー

可能です。
template要素とjavascriptを組み合わせて比較的容易に実現可能です。

まずはMDNのドキュメントを読み、サンプルコードを実行して基本的な使用方法を覚えましょう。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/template

仕組みを理解すれば、あとは配列をイテレートするだけです。

投稿2021/07/22 16:58

hope_mucci

総合スコア4447

s__oramame

2021/07/23 04:09

ありがとうございました！templateタグについて無知でした。参考にし、覚えて実装します！

行動規範の内容に同意します

できました

html
1
2<html>
3	<body>
4	</body>
5	<script>
6		const strs = ['①クラス名','②画像パス','③テキスト','④テキスト','⑤ここは<a>タグがあったり、何もなかったり']
7		const temp = `<li class="${strs[0]}"><img src="${strs[1]}" alt=""><p>${strs[2]}</p><p>${strs[3]}</p>${strs[4]}</li>`
8		const ul = document.createElement("ul")
9		ul.innerHTML = temp
10		document.querySelector("body").appendChild(ul);
11	</script>
12</html>
13