Javascript 要使用js在单击时添加行吗

我有下面的代码，可以从Visa网站上获取外汇数据。每次点击日期时，它都会添加另一行

但是添加一行似乎会导致重新加载/刷新所有iframe。。。为什么？我如何防止这种情况

（你可以在现场观看）

变量日期=新日期（）；
函数格式（日期）{
var mm=date.getUTCMonth（）+1；
var dd=date.getUTCDate（）；
var yy=date.getUTCFullYear（）；
返回mm+'/'+dd+'/'+yy；
}
函数addrow（）{
var d=格式（日期）；
document.body.innerHTML+=''+d+''；
date.setDate（date.getDate（）-1）；
}
addrow（）；

将文本添加到对象的

innerHTML

会导致对象的完全刷新–在本例中为

document.body

。因此，将重新加载其中的所有

iframe

s

相反，您可以创建一个新的

DIV

元素，并将其作为

document.body的子元素追加：

function addrow(){
  var d = format(date);
  var newRow= document.createElement('div');
  newRow.innerHTML= '<div class="row"><div class="date" onclick="addrow()">'+d+'</div><div class="rate"><iframe scrolling="no" src="http://usa.visa.com/support/consumer/travel-support/exchange-rate-calculator.html/?fromCurr=USD&toCurr=EUR&fee=0&exchangedate=' + d + '"></iframe></div></div>';
  document.body.appendChild(newRow);
  date.setDate(date.getDate() - 1);
}

函数addrow（）{
var d=格式（日期）；
var newRow=document.createElement（'div'）；
innerHTML=''+d+''；
document.body.appendChild（newRow）；
date.setDate（date.getDate（）-1）；
}
看看@JCOC611 Um。。。对不起，我完全不懂。我在看什么？
function addrow(){
  var d = format(date);
  var newRow= document.createElement('div');
  newRow.innerHTML= '<div class="row"><div class="date" onclick="addrow()">'+d+'</div><div class="rate"><iframe scrolling="no" src="http://usa.visa.com/support/consumer/travel-support/exchange-rate-calculator.html/?fromCurr=USD&toCurr=EUR&fee=0&exchangedate=' + d + '"></iframe></div></div>';
  document.body.appendChild(newRow);
  date.setDate(date.getDate() - 1);
}