我使用document.write，因为它能显示我希望它显示的内容。它可以工作，但它会删除我试图显示的ID中的页面的其他内容。有什么方法可以让我在id="main "内显示这个for循环？当我尝试使用document.getElementById("main").innerHTML时，它只会显示数组中的最后一个数据，也就是Normal这个城市。就是这样。谁能帮帮我？
var cities = [
{ city: "Bloomington, IL",
latitude: "40.4842° N, 88.9937° W",
population: "77,962",
elevation: "797 feet (243 m) above sea level",
},
{ city: "Normal, IL",
latitude: "40.5142° N, 88.9906° W",
population: "54,742",
elevation: "869 feet (265 m) above sea level",
}
];
function displayCityInfo() {
var x = document.getElementById("cityInfo").value;
if(x==1){
document.write("<h2>Results</h2>");
for(i=0; i<cities.length; i++){
document.write("Welcome to the city of " + cities[i].city
+ ", latitude is " + cities[i].latitude + "<p>");
}
}
else if(x==2){
document.write("<h2>Results</h2>");
for(i=0; i<cities.length; i++){
document.write("Welcome to the city of " + cities[i].city
+ ", population is " + cities[i].population + "<p>");
}
}
else if(x==3){
document.write("<h2>Results</h2>");
for(i=0; i<cities.length; i++){
document.write("Welcome to the city of " + cities[i].city
+ ", elevation is " + cities[i].elevation + "<p>");
}
}
}
<body>
<h1>City Information</h1>
<label>Select an option:</label>
<select id="cityInfo" onchange="displayCityInfo()">
<option selected disabled>Select an option</option>
<option value="1" enabled>Latitude/Longitude</option>
<option value="2" enabled>Population</option>
<option value="3" enabled>Elevation</option>
</select>
<main id ="main">
</main>
</body>
.innerHTML 能正常工作。你要做的是，而不是去 .innerHTML = "content" 你会用 +=. 这将会在元素的内部HTML中添加任何你想要的内容.因此，例如。
// This will *set* the content to be an H1 with 'Hey'
document.getElementById("main").innerHTML = "<h1>hey</h1>";
// This will *add* a paragraph tag to 'main'
document.getElementById("main").innerHTML += "<p>How is it going?</p>"
因此，"主 "现在将是
<div id="main>
<h1>hey</h1>
<p>How is it going?</p>
</div>
快速回答
每当你像刚才那样使用document write时，它就会覆盖整个页面，这就是document.write在onchange回调中发生的行为。这就是document.write在onchange回调中发生的行为。
要解决这个问题，你需要先创建你的字符串，然后把它追加到dom中。有多种方法可以做到这一点。
function displayCityInfo() {
var x = document.getElementById("cityInfo").value;
var m = document.getElementById("main")
if(x==1){
var cityInfoStr = "";
for(i=0; i<cities.length; i++){
cityInfoStr += "Welcome to the city of " + cities[i].city
+ ", latitude is " + cities[i].latitude + "<p>";
}
m.innerHTML = "<h1>Result</h1>" + cityInfoStr
}
}
请注意以下几点。
1-你应该在一个p标签中创建文本，也许是在一个p标签中（看看使用JS创建子节点）。
2- innerHTML函数不是一个安全的函数(检查它的安全问题，以防止跨站点脚本)
解释
根据规格。
这个方法有非常特殊的行为。在某些情况下，这个方法会影响HTML解析器运行时的状态，导致DOM与文档源码不对应（例如，如果写入的字符串是""或'<'！...。在其他情况下，调用可以先清除当前页面，就像调用了document.open()一样。在更多的情况下，该方法会被简单地忽略，或者抛出一个异常。用户代理被明确允许避免执行通过该方法插入的脚本元素。 而更糟糕的是，该方法的确切行为在某些情况下可能依赖于网络延迟，这可能导致很难调试的失败。基于所有这些原因，强烈不鼓励使用这种方法。
来自 https:/html.spec.whatwg.orgmultipagedynamic-markup-insertion.html#dom-document-write