From cf1f32a6f7dc2dc4976e5060e4f0a2d6f6aa6647 Mon Sep 17 00:00:00 2001
From: Jacek Kopecky <jacek@jacek.cz>
Date: Tue, 6 Feb 2018 09:47:31 +0000
Subject: [PATCH] change from createElement to html5 templates

---
 examples/webpages/index.html  |  8 ++++++++
 examples/webpages/pictures.js | 36 +++++++++++------------------------
 2 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/examples/webpages/index.html b/examples/webpages/index.html
index 62e77b1..66f34c3 100644
--- a/examples/webpages/index.html
+++ b/examples/webpages/index.html
@@ -38,4 +38,12 @@ <h1>JStagram</h1>
   </section>
 </main>
 
+<template id="picture_t">
+  <section class="picture">
+    <a class="img" href="error"><img src="error" alt="error"></a>
+    <p class="title">error</p>
+    <div class="delete" data-id="error">X</div>
+  </section>
+</template>
+
 <script src="pictures.js"></script>
diff --git a/examples/webpages/pictures.js b/examples/webpages/pictures.js
index 4a4f1b3..59cadff 100644
--- a/examples/webpages/pictures.js
+++ b/examples/webpages/pictures.js
@@ -61,31 +61,17 @@
 
     // install new ones in the order they came
     pics.forEach((pic) => {
-      const container = document.createElement('section');
-      container.classList.add('picture');
-      elMain.appendChild(container);
-
-      const a = document.createElement('a');
-      a.classList.add('img');
-      a.href = pic.file;
-      container.appendChild(a);
-
-      let el = document.createElement('img');
-      el.src = pic.file;
-      el.alt = pic.title;
-      a.appendChild(el);
-
-      el = document.createElement('p');
-      el.classList.add('title');
-      el.textContent = pic.title;
-      container.appendChild(el);
-
-      el = document.createElement('div');
-      el.classList.add('delete');
-      el.textContent = 'X';
-      el.dataset.id = pic.id;
-      el.onclick = requestDelete;
-      container.appendChild(el);
+      const template = document.querySelector('#picture_t');
+      const newEl = document.importNode(template.content, true).children[0];
+
+      newEl.querySelector('a.img').href = pic.file;
+      newEl.querySelector('a.img > img').src = pic.file;
+      newEl.querySelector('a.img > img').alt = pic.title;
+      newEl.querySelector('p.title').textContent = pic.title;
+      newEl.querySelector('div.delete').dataset.id = pic.id;
+      newEl.querySelector('div.delete').onclick = requestDelete;
+
+      elMain.appendChild(newEl);
     });
   }