자바 스크립트를 통해 동적으로 채워진 HTML 요소를 교체

Question

배경 :

나는 .json 파일을 다운로드 할 수 있도록 해주는 버튼이나 링크를 만들려고 해요. 이 파일은 동적이며 사용자가 수행하는 작업 (질문의 범위를 벗어남)에 따라 달라집니다.

버튼을 만들면 .json 파일을 다운로드 할 수있는 blob과 링크가 생성됩니다. 그러나 데이터가 변경되면 현재 링크를 대체하는 대신 현재 링크 뒤에 새 링크가 만들어집니다.

질문 :

가 어떻게 그냥 대신 더블을 작성하는 기존의 링크를 교체하려면 코드를 변경합니까?

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); 
}; 

내가 대신에 appendChild의 innerHTML을 시도했지만, 대신 링크, 그냥 문자열로 링크를 반환합니다.

HTML 코드 :

<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> 

다운로드 사업부가 위치한 HTML, 당신이 그것을 대체하는 대신 추가하고 있기 때문이다 Generate download

Answer 1

이 content_test는 링크를 포함하는 div입니다 가정, 당신이 innerHTML = a.outerHTML

appendChild와 appendChild(a)을 대체 할 수는 인수가 때마다 전달되는 내용을 추가 라는.

내용을 바꾸려면 innerHTML 속성을 사용할 수 있습니다.

outerHTML은 div에 삽입해야하는 HTML 코드를 반환합니다.

마지막 줄은 다음과 같아야합니다

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

Answer 2

를 참조하십시오.

먼저 마지막 요소를 제거하십시오 :

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

Answer 3

당신은 document.getElementById('content_test').appendChild(a)를 작성했습니다; - 'content_test'의 끝 부분에 항상 추가된다는 의미입니다.

전체 내용을 바꾸려면 innerHTML을 사용해야합니다. 예 :,

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

innerHTML을은 요소