既存のコンテンツに追加するのではなく、本文のコンテンツを更新するにはどうすればよいですか？

Question

私は、特定の都市の気象データを取得する簡単な練習天気予報ページを作成しています。

現在、都市に入るとul/li要素を作成してデータを表示しますが、既存の要素を置き換えて更新するのではなく、2番目の都市を入力すると、最初の都市。

window.onload = function() { 
 
    let cityName = document.querySelector("#city"); 
 
    let button = document.querySelector("#submit"); 
 
    // Checks value type and displays property and value. 
 
    let logLi = function(k, j) { 
 
    if (typeof j === 'object') { 
 
     isObject(j); 
 
    } else { 
 
     let li = document.createElement('LI'); 
 
     let liText = document.createTextNode('\u00A0\u00A0\u00A0\u00A0' + k + ": " + j); 
 
     li.appendChild(liText) 
 
     document.querySelector('body').appendChild(li); 
 
    } 
 
    } 
 
    // Checks Object's name type, and displays name of object or Array 
 
    let logUl = function(x) { 
 
    if (isNaN(x)) { 
 
     let output = document.createElement('UL'); 
 
     let outputText = document.createTextNode(x); 
 
     output.appendChild(outputText); 
 
     document.querySelector('body').appendChild(output); 
 
    } 
 
    } 
 

 
    // Calls logLi on every value in object 
 
    let isObject = function(x) { 
 
    for (let i in x) { 
 
     logLi(i, x[i]); 
 
    } 
 
    }; 
 

 
    //Updates Query url when user submits their city 
 
    let city = function() { 
 
    let api = "http://api.openweathermap.org/data/2.5/weather?q="; 
 
    let units = "&units=metric&APPID=xxxxxxx" 
 
    let url; 
 
    url = api + cityName.value + units; 
 

 
    //Breaks down the JSON 
 
    $(document).ready(function() { 
 
     $.getJSON(url, function(data) { 
 
     let sort = function(x) { 
 
      for (let k in x) { 
 
      if (typeof x[k] == 'number' || typeof x[k] == 'string') { 
 
       logLi(k, x[k]); 
 
      } else if (Array.isArray(x[k])) { 
 
       logUl(k); 
 
       sort(x[k]); 
 
      } else if (typeof x[k] == 'object') { 
 
       logUl(k); 
 
       isObject(x[k]); 
 
      } 
 
      } 
 
     } 
 
     sort(data); 
 

 
     }); 
 
    }); 
 
    } 
 
    //Submition 
 
    button.onclick = city; 
 
    cityName.addEventListener('keypress', function(e) { 
 
    if (e.keyCode == 13) { 
 
     city(); 
 
    } 
 
    }); 
 

 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input id="city" value="London"></input> 
 
    <button type="button" return false id="submit">submit</button> 
 
</form>

Answer 1

あなたのコードが読み少し難しいですが、私は "それを割れました"。 は、私はそれがこのように働かせた：追加私はjsのスクリプトでは、この後に "天気"

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

2）のIDと新しいdiv要素を追加しました

1）新たな変数

weather

と document.querySelector('body')のコード変更occurancesで window.onload機能

3）の内部に初めに

4）最後に内部にcityの機能が追加されます。weather.innerHTML = '';これは何もないように天気のhtmlをクリアします。

window.onload = function() { 
 
    let cityName = document.querySelector("#city"); 
 
    let button = document.querySelector("#submit"); 
 
    let weather = document.getElementById('weather'); 
 
    // Checks value type and displays property and value. 
 
    let logLi = function(k, j) { 
 
    if (typeof j === 'object') { 
 
     isObject(j); 
 
    } else { 
 
     let li = document.createElement('LI'); 
 
     let liText = document.createTextNode('\u00A0\u00A0\u00A0\u00A0' + k + ": " + j); 
 
     li.appendChild(liText) 
 
     weather.appendChild(li); 
 
    } 
 
    } 
 
    // Checks Object's name type, and displays name of object or Array 
 
    let logUl = function(x) { 
 
    if (isNaN(x)) { 
 
     let output = document.createElement('UL'); 
 
     let outputText = document.createTextNode(x); 
 
     output.appendChild(outputText); 
 
     weather.appendChild(output); 
 
    } 
 
    } 
 

 
    // Calls logLi on every value in object 
 
    let isObject = function(x) { 
 
    for (let i in x) { 
 
     logLi(i, x[i]); 
 
    } 
 
    }; 
 

 
    //Updates Query url when user submits their city 
 
    let city = function() { 
 
    weather.innerHTML = ''; 
 
    let api = "https://api.openweathermap.org/data/2.5/weather?q="; 
 
    let units = "&units=metric&APPID=XXXXXXXXXXXXXX" 
 
    let url; 
 
    url = api + cityName.value + units; 
 

 
    //Breaks down the JSON 
 
    $(document).ready(function() { 
 
     $.getJSON(url, function(data) { 
 
     let sort = function(x) { 
 
      for (let k in x) { 
 
      if (typeof x[k] == 'number' || typeof x[k] == 'string') { 
 
       logLi(k, x[k]); 
 
      } else if (Array.isArray(x[k])) { 
 
       logUl(k); 
 
       sort(x[k]); 
 
      } else if (typeof x[k] == 'object') { 
 
       logUl(k); 
 
       isObject(x[k]); 
 
      } 
 
      } 
 
     } 
 
     sort(data); 
 

 
     }); 
 
    }); 
 
    } 
 
    //Submition 
 
    button.onclick = city; 
 
    cityName.addEventListener('keypress', function(e) { 
 
    if (e.keyCode == 13) { 
 
     city(); 
 
    } 
 
    }); 
 

 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input id="city" value="London"></input> 
 
    <button type="button" return false id="submit">submit</button> 
 
</form> 
 
<div id="weather"></div>