iT邦幫忙

0

html 的template 標籤 問題

請問要如何更改刪除template標籤的內容呢?
我希望每次使用這個template的內容時
都把這個template內的某個元素內容清掉

我按按鈕時使用的這個template
在這個template內的某個元素下面再插入一個div
但我如果按第二次的時候
會跟前面第一次的div疊起來
所以我想把第一次產生的div清除

我現在是用jquery的.empty()方法清除
但是會報錯
如果用純js寫的話大概要怎麼寫呢?(對template做修改)
詳程式如下

<body>
 <button onclick="aaa()">
   123
 </button>

<template id="mytemplate">
  <img src="" alt="great image">
  <div class="comment"></div>
</template>
</body>
<script>
  function aaa() {
    var t = document.querySelector('#mytemplate');

    t.content.querySelector('img').src = 'https://cdn.shopifycloud.com/hatchful-web/assets/c3a241ae6d1e03513dfed6f5061f4a4b.png';

    var itemPageTitleP = document.createElement("div");
    var itemPageTitleP2 = document.createElement("div");


    itemPageTitleP.innerText="12";
    itemPageTitleP2.innerText="12456";
    t.content.querySelector('.comment').empty();
    t.content.querySelector('.comment').appendChild(itemPageTitleP).appendChild(itemPageTitleP2);


    var clone = document.importNode(t.content, true);
    document.body.appendChild(clone);
  }

</script>
看更多先前的討論...收起先前的討論...
dragonH iT邦研究生 3 級 ‧ 2019-07-09 19:22:16 檢舉
有什麼理由一定要用 template 嗎
ccutmis iT邦研究生 4 級 ‧ 2019-07-09 23:07:27 檢舉
試試看把
t.content.querySelector('.comment').empty();
改成
t.content.querySelector('.comment').innerHTML='';
dragonH iT邦研究生 3 級 ‧ 2019-07-09 23:09:19 檢舉
@ccutmis 大

我的直覺也跟您一樣 XD

只是實際測試好像不行
ccutmis iT邦研究生 4 級 ‧ 2019-07-09 23:12:56 檢舉
@dragonH 大
我試過可以耶 我把demo貼在底下好了._.
dragonH iT邦研究生 3 級 ‧ 2019-07-09 23:14:12 檢舉
!!!!
1
小魚
iT邦高手 1 級 ‧ 2019-07-09 18:26:31

你應該要去研究一下,
為什麼會跟第一次的div疊起來?

看更多先前的回應...收起先前的回應...

不是疊起來 應該是說重複
大概是這樣
模板的內容重複

https://ithelp.ithome.com.tw/upload/images/20190709/20113281UrsbIBcm1u.png

小魚 iT邦高手 1 級 ‧ 2019-07-09 19:37:26 檢舉

所以你的需求到底是什麼?

ccutmis iT邦研究生 4 級 ‧ 2019-07-09 23:21:52 檢舉

他的意思可能是說 每按一次應該是要多出來
一個圖 換行 test1 換行 test2
但現在按了之後 test1 換行 test2 會一直疊加 例如按第二次變成
一個圖 換行 test1 換行 test2 換行 test1 換行 test2

小魚 iT邦高手 1 級 ‧ 2019-07-10 00:00:25 檢舉

原來是這樣啊,
話說template已經被他改動過了啊...
而且還加了div在裡面,
如果要在函式裡改動結構,
那一開始就不需要template了,
乾脆直接憑空造一個就好了.

5
marlin12
iT邦新手 3 級 ‧ 2019-07-09 22:40:48
  1. template是一個可以重覆使用的[模板],不應直接改動它的內容。應該先給[模板]做一個{深層克隆}(deep clone),然後改動那個克隆。在克隆完全改好後,才把它加到文件裏。
  2. 因為[模板]是在同一個文件(document)裏,應該用cloneNode去做克隆。只有[模板]在另一個文件或框架(frame)裏,才會用importNode去做克隆。
  3. 如果要在文件中去除舊有的克隆,就要先把template裏全部東西,用一個有獨立ID的封套(wrapper)包裹。這樣,程式便可以利用這個ID,找出整件東西,然後除去。
    codepen(single clone)
    codepen(multiple clones)
<html lang="en">
<head>
  <title>template tag demo</title>
</head>

<body>
  <button onclick="showContent()">Show content</button>
  <hr>

  <template id="my-template">
    <div id="my-content-wrapper">
      <img src="" alt="great image">
      <div class="comment"></div>
    </div>
  </template>

  <script>
    const myTemplate = document.getElementById('my-template');
    let cloneCount = 0;

    function showContent() {
      // remove old template clone (if exist)
      const myContentWrapper = document.getElementById('my-content-wrapper');
      if( myContentWrapper ) {
        document.body.removeChild( myContentWrapper );
      }

      // deep clone the template
      const myTemplateClone = myTemplate.content.cloneNode( true );

      // modify the template clone
      const imgNode = myTemplateClone.querySelector('img');
      imgNode.src = `https://loremflickr.com/320/240/nature?${++cloneCount}`; 

      const commentNode = myTemplateClone.querySelector('.comment');
      appendTextDiv( commentNode, `clone count = ${cloneCount}` );
      appendTextDiv( commentNode, `clone date/time = ${new Date()}` );
      
      // append the modified template clone to document body
      document.body.appendChild( myTemplateClone );
    }

    function appendTextDiv( parentNode, divText ) {
      const divNode = document.createElement('div');
      divNode.innerText = divText;
      parentNode.appendChild( divNode );
    }
  </script>
</body>
</html>
2
ccutmis
iT邦研究生 4 級 ‧ 2019-07-09 23:18:00

只改了一行...
t.content.querySelector('.comment').empty();
改成
t.content.querySelector('.comment').innerHTML='';

<!doctype html>
<html>
<head></head>
<body>
 <button onclick="aaa()">
   123
 </button>

<template id="mytemplate">
  <img src="" alt="great image">
  <div class="comment">111</div>
</template>
<script>
  function aaa() {
    var t = document.querySelector('#mytemplate');

    t.content.querySelector('img').src = 'https://cdn.shopifycloud.com/hatchful-web/assets/c3a241ae6d1e03513dfed6f5061f4a4b.png';

    var itemPageTitleP = document.createElement("div");
    var itemPageTitleP2 = document.createElement("div");


    itemPageTitleP.innerText="12";
    itemPageTitleP2.innerText="12456";
    t.content.querySelector('.comment').innerHTML='';
    t.content.querySelector('.comment').appendChild(itemPageTitleP).appendChild(itemPageTitleP2);


    var clone = document.importNode(t.content, true);
    document.body.appendChild(clone);
  }
</script>
</body>
</html>

https://ithelp.ithome.com.tw/upload/images/20190709/20028574uENB3bq116.png

找到一個跟html5 template tag有關的網路文章給大家參考
https://blog.csdn.net/aitangyong/article/details/50350417
/images/emoticon/emoticon82.gif

dragonH iT邦研究生 3 級 ‧ 2019-07-09 23:23:48 檢舉

喔喔~ 了解了

我以為樓主要的是頁面上只會有一個<template>

也就是只有一張圖

一個 .comment <div>

/images/emoticon/emoticon25.gif

ccutmis iT邦研究生 4 級 ‧ 2019-07-09 23:25:35 檢舉

/images/emoticon/emoticon39.gif

0
冰水
iT邦新手 5 級 ‧ 2019-07-12 14:29:53

試試看 單純把它刪掉

刪除-->資料加回去-->複製


    t.content.querySelector('.comment').remove();
    
<script>

 function aaa() {
    var t = document.querySelector('#mytemplate');

    t.content.querySelector('img').src = 'https://cdn.shopifycloud.com/hatchful-web/assets/c3a241ae6d1e03513dfed6f5061f4a4b.png';

    var itemPageTitleP2 = document.createElement("div");
    itemPageTitleP2.className = "comment";
    itemPageTitleP2.innerText = "12456";

    t.content.querySelector('.comment').remove();
    t.content.appendChild(itemPageTitleP2);

  

    //t.content.querySelector('#app').appendChild(itemPageTitleP2);


    var clone = document.importNode(t.content, true);
    document.body.appendChild(clone);
  }


</script>

我要發表回答

立即登入回答