如何使用 Javascript 将元素的内部 HTML 文本替换为数组的一部分

Question

我正在学习一个 JavaScript 课程，作为练习，我们必须将一个数组与另一个数组进行比较，并仅将一个元素的内部 html 文本替换为两个数组中都存在的字符串值。这是javascript：

// Here is an array of US State Capitals to use
var capitals = ["Montgomery", "Juneau", "Phoenix", "Little Rock", "Sacramento", "Denver", "Hartford", "Dover", "Tallahassee", "Atlanta", "Honolulu", "Boise", "Springfield", "Indianapolis", "Des Moines", "Topeka", "Frankfort", "Baton Rouge", "Augusta", "Annapolis", "Boston", "Lansing", "Saint Paul", "Jackson", "Jefferson City", "Helena", "Lincoln", "Carson City", "Concord", "Trenton", "Santa Fe", "Albany", "Raleigh", "Bismarck", "Columbus", "Oklahoma City", "Salem", "Harrisburg", "Providence", "Columbia", "Pierre", "Nashville", "Austin", "Salt Lake City", "Montpelier", "Richmond", "Olympia", "Charleston", "Madison", "Cheyenne"];



// Using JavaScript, get the contents of the "cities" div and convert it into an array of strings (each city will be an element in the array)
var citiesString = document.getElementById("cities").innerHTML;

var cities = citiesString.split(", ");


// Loop through the array of cities.  Compare each element to the array of capitals.  If a city is NOT a state capital, update the HTML output to leave out that city.  (Note: formatting, commas, etc. doesn't count -- just get the cities to display.)


for (i = 0; i < cities.length; i++) {
  if(capitals.indexOf(cities[i]) >=0) {
    document.getElementById("cities").innerHTML += cities[i] += ", ";
  } 
}

我让它只显示两个数组中存在的城市，但它仍然事先显示城市数组的整个列表。如何让它只显示“波士顿、印第安纳波利斯和亚特兰大”？

Answer 1

在 for 循环之前清除“城市”的内容。

document.getElementById("cities").innerHTML = "";

您将数组附加到元素中的现有文本。