回答編集履歴

2

ちょうせい

2022/11/29 06:14

投稿

yambejp
yambejp

スコア114784

test CHANGED
@@ -19,9 +19,6 @@
19
19
  });
20
20
  });
21
21
  </script>
22
- </head>
23
- <body>
24
- </body>
25
22
  <template id="template">
26
23
  <div>
27
24
  <div class="name"></div>

1

調整

2022/11/29 06:11

投稿

yambejp
yambejp

スコア114784

test CHANGED
@@ -1 +1,33 @@
1
1
  テンプレを作っておいて構造はテンプレで共有、内容をあとから調整すれば効率はあがるとおもいます
2
+
3
+ # 参考
4
+ テンプレを使った参考
5
+ ```javascript
6
+ <script>
7
+ window.addEventListener('DOMContentLoaded', ()=>{
8
+ const list=[
9
+ {name:"a",price:100 ,content:"ほげほげ"},
10
+ {name:"b",price:1000,content:"ふがふが"},
11
+ {name:"c",price:500 ,content:"ぴよぴよ"},
12
+ ];
13
+ list.forEach(x=>{
14
+ const tmp=template.content.cloneNode(true);
15
+ ["name","price","content"].forEach(y=>{
16
+ tmp.querySelector(`.${y}`).textContent=x[y];
17
+ });
18
+ output.appendChild(tmp);
19
+ });
20
+ });
21
+ </script>
22
+ </head>
23
+ <body>
24
+ </body>
25
+ <template id="template">
26
+ <div>
27
+ <div class="name"></div>
28
+ <div class="price"></div>
29
+ <div class="content"></div>
30
+ </div>
31
+ </template>
32
+ <output id="output"></output>
33
+ ```