Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

Correct way of using template in html with jquery

Avatar of Rohit Bajaj
Rohit BajajFlag for India asked on
JavaScriptHTMLjQuery
5 Comments1 Solution119 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
Avatar of HainKurt
HainKurtFlag of Canada imageSr. System Analyst

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

Commented:
This problem has been solved!
Unlock 1 Answer and 5 Comments.
See Answers