Javascript 如何更新body的内容而不是添加到现有内容？

我正在创建一个简单的实践天气页面，您可以在其中获取特定城市的天气数据

当前，当我输入一个城市时，它会通过创建ul/li元素来显示数据，但当我输入第二个城市时，它只会将第二个城市的数据添加到第一个城市下，而不是替换和更新现有元素

window.onload=函数{ 让cityName=document.querySelectorcity； let button=document.querySelectorsubmit； //检查值类型并显示属性和值。 设logLi=functionk，j{ 如果typeof j===‘对象’{ isObjectj； }否则{ 让li=document.createElement'li'； 让liText=document.createTextNode'\u00A0\u00A0\u00A0\u00A0'+k+：+j； li.childlitext 查询选择器“body”.appendChildli； } } //检查对象的名称类型，并显示对象或数组的名称 设logUl=functionx{ 如果是Nanx{ 让输出=document.createElement'UL'； 让outputText=document.createTextNodex； output.appendChildoutputText； querySelector'body'。appendChildoutput； } } //对对象中的每个值调用logLi 设isObject=functionx{ 为了让我进入x{ logLii，x[i]； } }; //当用户提交其城市时更新查询url 让城市=功能{ 设api=http://api.openweathermap.org/data/2.5/weather?q=; 设单位=&units=公制&APPID=xxxxxxx 让url； url=api+cityName.value+单位； //分解JSON $document.readyfunction{ $.getJSONurl，functiondata{ 设sort=functionx{ 让k进入x{ 如果x[k]的类型=='number'| | x[k]的类型=='string'{ logLik，x[k]； }如果Array.isArrayx[k]{ 洛古尔克； sortx[k]； }否则，如果x[k]=“对象”的类型{ 洛古尔克； 等深线x[k]； } } } sortdata； }; }; } //提交 button.onclick=城市； cityName.addEventListener'keypress'，函数E{ 如果e.keyCode==13{ 城市 } }; }; 提交

---

你的代码有点难读，但我破解了。 我让它像这样工作：

我添加了一个新的div，ID为weather

<form>
<input id="city" value="London"></input>
<button type="button" return false id="submit">submit</button>
</form>
<div id="weather"></div>

提交

---

张贴的代码不够简单。请简化/最小化代码，使其在Stackoverflow中运行，并且仍然产生相同的问题。好吧，您是。追加收到的每个项目，而不是对现有城市进行任何类型的检查，如果是，则进行替换。也许您可以向LI添加一个属性，例如包含城市名称的数据城市，然后查看您是否已经有文档。查询选择“LI[data city=some city]”并替换内容（如果有），否则将附加一个新的LI。非常感谢。这正是我想要的行为。这是我第一次为其他人编写代码。如果你有时间的话，你能详细说明一下是什么让我的代码一开始很难阅读吗？