insertBeforeは以前のメッセージを追加しています

Question

リンクをクリックすると、divの内容を表示するJavascriptを書いています。コードは以下の通りです。

シナリオは、私が10個のアンカータグをしたと私はアンカーをクリックしたとき、私は私が得るクリックしたときには、divのここで初めてtextResult

function getTheIncident(keyWord, text, shortDesc, description) { 
    console.log(keyWord + "\t" + text); 
    var e = document.getElementById('textResult'); 
    var issueTag = document.createElement('H2'); 
    var resolutionTag = document.createElement('H2'); 
    var descTag = document.createElement('H2'); 

    if (text) { 
     var issue = document.createElement('div'); 
     issueTag.innerHTML = "Issue"; 
     issue.innerHTML = shortDesc.replace('\^', '\''); 
     issue.insertBefore(issueTag, issue.firstChild); 

     var resol = document.createElement('div'); 
     resolutionTag.innerHTML = "Resolution"; 
     resol.innerHTML = text.replace('\^', '\''); 
     resol.insertBefore(resolutionTag, resol.firstChild); 

     var desc = document.createElement('div'); 
     descTag.innerHTML = "Description"; 
     desc.innerHTML = description.replace('\^', '\''); 
     desc.insertBefore(descTag, desc.firstChild); 

     e.insertBefore(resol, e.firstChild); 
     e.insertBefore(desc, e.firstChild); 
     e.insertBefore(issue, e.firstChild); 

    } 
    else { 

     h1Tag.innerHTML = "Issue"; 
     e.innerHTML = shortDesc.replace('\^', '\''); 
     e.insertBefore(h1Tag, e.firstChild); 

     h1Tag.innerHTML = "Description"; 
     e.innerHTML = shortDesc.replace('\^', '\''); 
     e.insertBefore(h1Tag, e.firstChild); 

     h1Tag.innerHTML = "No Resolution Available"; 
     e.innerHTML = text.replace('\^', '\''); 
     e.insertBefore(h1Tag, e.firstChild); 
    } 
} 

に結果を表示しなければならない、このようなものです結果は次のようになります。

Issue 

Laptop issue 
Description 

RAM with 128GB 
Resolution 

A Procurement order has been placed for a new RAM with 128 GB 

と私は二度目

Issue 

Laptop issue 
Description 

RAM with 128GB 
Resolution 

A Procurement order has been placed for a new RAM with 128 GB 
Issue 

Laptop issue 
Description 

RAM with 128GB 
Resolution 

A Procurement order has been placed for a new RAM with 128 GB 

のためにそれをクリックします。しかし、私は、これは一度だけ出てくるしたいとき。

私は間違っていると私はそれを修正する方法を教えてください。

注私はjQueryを使用せずにJavascriptを使用しています。あなたがそうでなければ、同時に両方を持ってしようとしている、新しいものを追加する前に、古い子供を削除する必要が

おかげ

Answer 1

。

var issue, resol, desc; 
if (text) { 
    if (issue) e.removeChild(issue); 
    if (resol) e.removeChild(resol); 
    if (desc) e.removeChild(desc) 
    issue = document.createElement('div'); 
    issueTag.innerHTML = "Issue"; 
    issue.innerHTML = shortDesc.replace('\^', '\''); 
    issue.insertBefore(issueTag, issue.firstChild); 

    resol = document.createElement('div'); 
    resolutionTag.innerHTML = "Resolution"; 
    resol.innerHTML = text.replace('\^', '\''); 
    resol.insertBefore(resolutionTag, resol.firstChild); 

    desc = document.createElement('div'); 
    descTag.innerHTML = "Description"; 
    desc.innerHTML = description.replace('\^', '\''); 
    desc.insertBefore(descTag, desc.firstChild); 

    e.insertBefore(resol, e.firstChild); 
    e.insertBefore(desc, e.firstChild); 
    e.insertBefore(issue, e.firstChild); 

} 

これは、追加のコンテンツを挿入したくない場合は、なぜあなたは `）（`のinsertBeforeを使用している