When you create an element with document.createElement it exists only in memory-- it isn't actually attached to the DOM yet. You need to insert it somewhere, like so:
var listApi = document.querySelector(".list-item")
var searchApi = document.getElementById("search-api")
document.querySelector("#enter").addEventListener("click", e => {
e.preventDefault();
var inputValue = searchApi.value;
fetch('https://wft-geo-db.p.rapidapi.com/v1/geo/cities/' +inputValue, options)
.then(response => response.json())
.then(response => console.log(response))
.then((data) => {
var title = document.createElement("li")
title.setAttribute = ".list-item"
title.innerText = data;
var list = document.getElementById("result-list");
list.appendChild(title);
})
.catch(err => console.error(err));
});
Also note your line title.setAttribute = ".list-item" won't work as you expect-- you are overwriting the setAttribute function with a string. Better to just use classList as title.classList.add('list-item');
Also, as user Andy points out in the comments, you have another problem with your chaining of .thens-- specifically, you have a .then() that console.logs the result and returns nothing. The way promise chains work is that the next .then will act on the result passed from the previous .then; however, .then(response => console.log(response)) will return undefined, so the data argument coming into your next .then will be undefined. Below is a code example that fixes both the setAttribute issue and the .then issue:
var listApi = document.querySelector(".list-item")
var searchApi = document.getElementById("search-api")
document.querySelector("#enter").addEventListener("click", e => {
e.preventDefault();
var inputValue = searchApi.value;
fetch('https://wft-geo-db.p.rapidapi.com/v1/geo/cities/' +inputValue, options)
.then(response => response.json())
.then(response => {
console.log(response);
return response;
})
.then((data) => {
var title = document.createElement("li")
title.classList.add("list-item");
title.innerText = data;
var list = document.getElementById("result-list");
list.appendChild(title);
})
.catch(err => console.error(err));
});
Finally, if you are just attempting to insert a plain object or array as text into the DOM you will likely get unexpected results, such as it displaying simply as "object Object" in the <li>. Let's presume for a moment that your response looks something like this:
{
data: ['MacReady', 'Childs', 'Blair', 'Nauls', 'Clark', 'Palmer']
}
To write this data to the DOM, you'd need to access it at the data property, then map over it (either with a loop or using an array method like .forEach) and add each item to an element (like an <li> in your case) and insert it to the DOM. Here's an example:
var listApi = document.querySelector(".list-item")
var searchApi = document.getElementById("search-api")
document.querySelector("#enter").addEventListener("click", e => {
e.preventDefault();
var inputValue = searchApi.value;
fetch('https://wft-geo-db.p.rapidapi.com/v1/geo/cities/' +inputValue, options)
.then(response => response.json())
.then(response => {
console.log(response);
return response;
})
.then((data) => {
let myList = data.data;
myList.forEach(datum => {
var title = document.createElement("li")
title.classList.add("list-item");
title.innerText = datum;
var list = document.getElementById("result-list");
list.appendChild(title);
});
})
.catch(err => console.error(err));
});
There are other approaches to this-- using a for loop, or using DOM fragments to increase performance, but something along these lines should work for your use case.
