通过JavaScript替换动态填充的HTML元素

Question

背景

我正在尝试创建一个按钮或链接，使用户可以下载.json文件。此文件是动态的，并根据用户的操作而变化（在问题范围之外）。

我创建了一个按钮，单击该按钮会生成一个blob和一个用于下载.json文件的链接。但是，当数据更改时，会在当前链接后面创建一个新链接，而不是替换当前链接。

问题：

如何更改代码以仅替换现有链接，而不是创建双重？

JS代码：

function download_rapport(){
    var data = geojson.features.map(function(row) { return row.properties; });
    var json = JSON.stringify(data);
    var blob = new Blob([json], {type: "application/json"});
    var url  = URL.createObjectURL(blob);

    var a = document.createElement('a');
    a.download    = "backup.json";
    a.href        = url;
    a.textContent = "Download backup.json";

    document.getElementById('content_test').appendChild(a);
};

我尝试过innerHTML而不是appendChild，但它只是将链接作为字符串返回而不是链接。

HTML code：

 <form action="javascript:submitQuery()" id="advancedSearch">  
<!-- Modal/Pop-up window -->
<div id="generateReport" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
     <button onclick="download_rapport()">Generate download</button> 
        <div id="content_test"></div>
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Fastfood report</h4>
      </div>
      <div class="modal-body">
          <div class="table-responsive" id="test">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
        </div>
    </div>
  </div>
</div>

下载div所在的HTML，请参阅Generate download

Answer 1

那是因为你要追加而不是替换它。

首先尝试删除最后一个元素：

var content = document.getElementById('content_test');
if (content.length > 0) {
    content.removeChild(content.lastChild);
} 
content.appendChild(a);

Answer 2

假设content_test是仅包含链接的div，您可以将appendChild(a)替换为innerHTML = a.outerHTML

每次调用时，

appendChild都会添加参数中传递的内容。

要替换内容，您可以使用属性innerHTML。

元素上的

outerHTML返回您需要在div中插入的HTML代码。

最后一行应如下所示：

document.getElementById('content_test').innerHTML = a.outerHTML;

Answer 3

你写过document.getElementById('content_test').appendChild(a); - 这意味着它总是会在'content_test'结束时添加。

要替换整个内容，您需要使用innerHTML。如，

document.getElementById('content_test').innerHTML = a;

InnerHTML 指定元素的HTML内容