Correct way of using template in html with jquery

HI,
I have the following html templates :

<template id="commitdate">
  <div class="commit-group-heading">
  </div>
  <ul class="list-unstyled commits-list">
    <li>
      <div class="commit-main-info">
        <a href="#" target="_blank"></a>
      </div>
      <span class="text-muted">by</span> <span class="author"></span>
    </li>
  </ul>
  </li>
</template>
<template id="commit">
  <li>
    <div class="commit-main-info">
      <a href="#" target="_blank"></a>
    </div>
    <span class="text-muted">by</span> <span class="author"></span>
  </li>
</template>

And i am using it like this in my javascript code :

if (lastDate == commitDate) {
                var commitTemplate = $("#commit");
                var commitNode = commitTemplate.prop("content");
                $(commitNode).find(".commit-main-info").append(commit.message);
                $(commitNode).find(".author").text(commit.login);
                $(commitNode).find("a").attr("href", commit.html_url);
                $(commitNode).find("a").text("# "+commit.sha.substring(0,6));
                var clonedCommitNode = document.importNode(commitNode, true);
                $("ul").last().append(clonedCommitNode);
            } else {
                var commitDateTemplate = $("#commitdate");
                var commitDateNode = commitDateTemplate.prop("content");
                $(commitDateNode).find(".commit-group-heading").text("Commits on " + commit.date);
                $(commitDateNode).find("a").attr("href", commit.html_url);
                $(commitDateNode).find("a").text("# "+commit.sha.substring(0,6));
                $(commitDateNode).find(".commit-main-info").append(commit.message);
                $(commitDateNode).find(".author").text(commit.login);
                var clonedCommitDateNode = document.importNode(commitDateNode, true);
                $("body").append(clonedCommitDateNode);
            }

what this is doing is fetching each element from the json array and appending it to the DOM depending on a certain condition it chooses which template to use.
But what is happening is that i am seeing that the commit.message is getting acumulated that is the next node contains the previous commit message plus the current one.
The aim here is to add some text after the anchor tag inside the div commit-main-info
What could be wrong with this approach .
Please suggest correction
I just tried changing the append line to text :                 $(commitDateNode).find(".commit-main-info").text(commit.message);
This solves the problem But the anchor tag also gets removed.
So there is something which the append is doing which is causing earlier commit.message to be added again.
Thanks