troubleshooting Question

Correct way of using template in html with jquery

Avatar of Rohit Bajaj
Rohit BajajFlag for India asked on
HTMLJavaScriptjQuery
5 Comments2 Solutions119 ViewsLast Modified:
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
ASKER CERTIFIED SOLUTION
HainKurt
Sr. System Analyst

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 2 Answers and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros