html 的template 標籤問題

javascript html5 前端

QQ 2019-07-09 18:18:18 ‧ 3529 瀏覽

分享至

請問要如何更改刪除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邦超人 5 級 ‧ 2019-07-09 19:22:16 檢舉

有什麼理由一定要用 template 嗎

ccutmis iT邦高手 2 級 ‧ 2019-07-09 23:07:27 檢舉

試試看把
t.content.querySelector('.comment').empty();
改成
t.content.querySelector('.comment').innerHTML='';

dragonH iT邦超人 5 級 ‧ 2019-07-09 23:09:19 檢舉

@ccutmis 大

我的直覺也跟您一樣 XD

只是實際測試好像不行

ccutmis iT邦高手 2 級 ‧ 2019-07-09 23:12:56 檢舉

@dragonH 大
我試過可以耶我把demo貼在底下好了._.

dragonH iT邦超人 5 級 ‧ 2019-07-09 23:14:12 檢舉

!!!!

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

4 個回答

小魚

iT邦大師 1 級 ‧ 2019-07-09 18:26:31

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

回應 4
分享
檢舉

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

QQ iT邦新手 5 級 ‧ 2019-07-09 18:46:38 檢舉

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

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

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

ccutmis iT邦高手 2 級 ‧ 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了,
乾脆直接憑空造一個就好了.

登入發表回應

marlin12

iT邦研究生 5 級 ‧ 2019-07-09 22:40:48

template是一個可以重覆使用的[模板]，不應直接改動它的內容。應該先給[模板]做一個{深層克隆}(deep clone)，然後改動那個克隆。在克隆完全改好後，才把它加到文件裏。
因為[模板]是在同一個文件(document)裏，應該用cloneNode去做克隆。只有[模板]在另一個文件或框架(frame)裏，才會用importNode去做克隆。
如果要在文件中去除舊有的克隆，就要先把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>

回應
分享
檢舉

登入發表回應

ccutmis

iT邦高手 2 級 ‧ 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>

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

回應 2
分享
檢舉

dragonH iT邦超人 5 級 ‧ 2019-07-09 23:23:48 檢舉

喔喔~ 了解了

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

也就是只有一張圖

一個 .comment <div>

ccutmis iT邦高手 2 級 ‧ 2019-07-09 23:25:35 檢舉

登入發表回應

咖咖拉

iT邦好手 1 級 ‧ 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>