Question

我正在创建一个用户可以搜索某个国家/地区的网站，该国家/地区的城市将会显示在该网页上。我现在可以为每个国家显示一个城市，但如果该国家有两个或更多城市，则只有一个城市显示。我尝试了“+ =”来创建将在页面上显示的几张卡片。这给我带来了一些问题。我想我必须使用“appendChild（）”函数将每张城市卡附加到DOM中的新div。但是我不能100％确定如何使用此代码。

如果我在搜索字段中键入“USA”，而美国则将LA和NY作为城市。第一个现在显示，但我想要两个显示。我尝试过使用document.createElement（'cityCard'）并将cityCard附加到卡片显示的容器中。但我没有按照我的意愿去工作，我可能会犯一些语法错误。

这是这项任务的严谨心态吗？还是更好的方式？

不介意CSS，它没有完成。

链接到所有代码所在的小提琴。

https://jsfiddle.net/uzfb852g/12/

添加了以下代码（与小提琴中的代码相同）

HTML CODE：

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Martel:400,700,900" 
rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>FINN DITT FERIESTED!</h1>
<form id="inputForm">
    <input type="text" id="sokFelt">
    <button id="btn">Search</button>
    <button id="allBtn">Alle steder</button>
</form>
<div id="break"></div>
<div id="searchWord"></div>
<div id="cardContainer">
    <div id="cityCards">
        <h2 id="country"></h2>
        <h4 id="city"></h4>
        <img id="cityImg">
    </div>
</div>

<button id="btnTwo"></button>

<script src="content.js"></script>
</body>
</html>

CSS代码：

body{
margin: auto;
width: 100%;
height: 100%;
}

h1{
text-align: center;
margin: 25px;
color: tomato;
font-family: 'Martel', serif;
text-shadow: 1px 2px #333;
font-weight: 900;
}

#inputForm{
text-align: center;
margin: 25px;
}

#break{
width: 80%;
margin: auto;
height: 1px;
text-align: center;
background-color: #333;
}

#btn{
padding: 5px 15px;
}

#sokFelt{
padding: 5px 15px;
}

#searchWord{
font-size: 24px;
margin: 40px;
color: #333;
font-weight: bold;
}

#cardContainer{
width: 100%;
margin: auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
 }

#cityCards{
padding: 12px 22px;
background-color: aqua;
border-radius: 5px;
width: 20%;
height: 250px;
}

#cityImg{
width: 100%;
height: 200px;
}

#allBtn{
padding: 5px 15px;
}

JS CODE：

var form = document.getElementById('inputForm');
var input = form.querySelector('input');
var country = document.getElementById("country");
var city = document.getElementById("city");
var cityImg = document.getElementById("cityImg");
var searchWord = document.getElementById("searchWord");

/*IMAGES*/

var place = [
{land: 'Norge', by: 'Oslo', img: 'img/Oslo.jpg'},
{land: 'USA', by: 'Los Angeles', img: "img/LA.jpg"},
{land: 'USA', by: 'New York', img: "img/NewYork.jpg"},
{land: 'Tyskland', by: 'Berlin', img: 'img/berlin.jpg'},
{land: 'Frankrike', by: 'Paris', img:'img/berlin.jpg'}
];

form.addEventListener('submit', (e) => {
e.preventDefault();
    for(var i = 0; i < place.length; i += 1){
        if(input.value === place[i].land) {
            searchWord.innerHTML = input.value;
            document.createElement('cityCards');
            country.innerHTML = place[i].land;
            city.innerHTML = place[i].by;
            cityImg.src = place[i].img;
        } 
    }
 });


document.getElementById("btnTwo").addEventListener("click", function(){
document.createElement("")
});

Answer 1

试试看这个问题：

 country.innerHTML += place[i].land;
 city.innerHTML += place[i].by;

citycards不是HTML元素

您必须使用div为(array[i]=document.createElement('div'))

的数组

然后使用img[i] = document.createElement('img')创建图片设置img.src，然后将appendChild附加到cardcontainer。

Answer 2

使用createElement和appendChild是正确的方法，但您也可以使用template代码。

然后，您可以使用过滤后的信息填充模板，并将模板导入DOM。

这是一个关于它如何看起来的例子。您可能需要查看array函数filter，map和forEach。

var form = document.getElementById('inputForm');
var input = form.querySelector('input');
var searchWord = document.getElementById("searchWord");
var template = document.querySelector('#cardContainer');
var getAllBtn = document.getElementById('allBtn');
var place=[{land:"Norge",by:"Oslo",img:"http://www.telegraph.co.uk/travel/destination/article137625.ece/ALTERNATES/w460/oslocityhall.jpg"},{land:"USA",by:"Los Angeles",img:"http://www.zocalopublicsquare.org/wp-content/uploads/2015/10/DistantLASkylineBIG-levinson.jpg"},{land:"USA",by:"New York",img:"https://www.city-journal.org/sites/cj/files/New-York.jpg"},{land:"Tyskland",by:"Berlin",img:"http://www.telegraph.co.uk/content/dam/Travel/Destinations/Europe/Germany/Berlin/Berlin%20cathedral-xlarge.jpg"}];

form.addEventListener('submit', (e) => {
  e.preventDefault();
});

getAllBtn.addEventListener("click", function() {
  // clear your container div to empty all previous added elements.
  searchWord.innerHTML = "";
  // filter your place data on the land property of each item.
  place.filter( item => item.land === input.value )
  // set the img src attr and text content for the elements in the template.
    .map( item => {
    template.content.getElementById("country").textContent = item.land;
    template.content.getElementById("city").textContent = item.by;
    template.content.getElementById("cityImg").src = item.img;
    return document.importNode(template.content, true);
  })
  // append them to your container element.
    .forEach( item => {
    searchWord.appendChild(item)
  })
});

body{margin:auto;width:100%;height:100%}h1{text-align:center;margin:25px;color:tomato;font-family:'Martel',serif;text-shadow:1px 2px #333;font-weight:900}#inputForm{text-align:center;margin:25px}#break{width:80%;margin:auto;height:1px;text-align:center;background-color:#333}#btn{padding:5px 15px}#sokFelt{padding:5px 15px}#searchWord{font-size:24px;margin:40px;color:#333;font-weight:700}#cardContainer{width:100%;margin:auto;display:flex;flex-direction:column;flex-wrap:wrap}#cityCards{padding:12px 22px;background-color:aqua;border-radius:5px;width:20%;height:250px}#cityImg{width:100%;height:200px}#allBtn{padding:5px 15px}

<h1>VACATION</h1>
<form id="inputForm">
    <input type="text" id="sokFelt">
    <button id="btn">Search</button>
    <button id="allBtn">All places</button>
</form>
<div id="break"></div>
<div id="searchWord"></div>
<template id="cardContainer">
    <div id="cityCards">
        <h2 id="country"></h2>
        <h4 id="city"></h4>
        <img id="cityImg">
    </div>
</template>

将多个JSON对象打印到页面

2 个答案: