javascript - 如何更新正文内容而不是添加到现有内容？

Question

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

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

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

你的代码有点难以阅读，但我“破解了它”。我让它像这样工作:

1) 我添加了一个 ID 为“weather”的新 div

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

2)在此之后在js脚本中添加一个新变量

let Weather = document.getElementById('weather'); 在 window.onload 函数内开始

3) 在代码中将 document.querySelector('body') 更改为 weather

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>