將 JS 附加到 HTML

Question

我正在嘗試將我的變量“showName”和“showDescription”附加到“results”div 對象。 我曾嘗試使用“innerHTML”添加它們，但我只是得到了顯示的描述。 我曾嘗試制作額外的 div 以將 'results' div 放在里面，但這也不起作用。

我希望“showName”出現在 div 中的“showDescription”上方。

我正在挑戰自己不使用 JQuery，因此這不是一個可行的選擇。

代碼：

document.querySelector('.search').addEventListener('keypress', function(e){//On button click of enter, get the value of the search bar and concatanate it to the end of the url
  if(e.key==='Enter'){
    var query = document.getElementById('main').value;
    var url = fetch("http://api.tvmaze.com/search/shows?q="+query) //use fetch to get the data from the url, THEN convert it to json THEN console.log the data.
    .then(response => response.json())
    .then(data => {
      console.log(data)

      var domObject = document.createElement('div')
      domObject.id="myDiv";
      domObject.style.width="800px";
      domObject.style.height="5000px";
      domObject.style.display="flex";
      domObject.style.flexDirection="column";
      domObject.style.margin="auto";
      domObject.style.borderRadius="30px";
      domObject.style.background="";
      document.body.appendChild(domObject);

      for (var i = 0; i < data.length; i++) { //for all the items returned, loop through each one and show the name of the show and the dsescription of the show.
        var showName = data[i].show.name;
        //console.log(showName);
        var showDescription = data[i].show.summary
//console.log(showDescription);
        var results = document.createElement('div')
        results.id="myResults";
        results.style.width="600px"
        results.style.height="400px";
        results.style.background="white";
        results.style.margin="auto";
        results.style.borderRadius="30px";
        results.style.fontFamily="Poppins"
        results.style.display="flex";
        results.style.flexDirection="column";
        results.innerHTML=showName;
        results.innerHTML=showDescription;
        document.getElementById("myDiv").appendChild(results);
      }
    })
  }
});
document.querySelector('.search').addEventListener('keydown', function(o){
  if(o.key==='Backspace'){
    location.reload();
  }
});

在“汽車”中搜索的結果

Answer 1

results.innerHTML = showName;
results.innerHTML = showDescription;

有了這個，您將用showName覆蓋showDescription 。
您需要做的是與+=連接。

此外，替換它會容易得多：

domObject.style.width = "800px";
domObject.style.height = "5000px";
domObject.style.display = "flex";
domObject.style.flexDirection = "column";
domObject.style.margin = "auto";
domObject.style.borderRadius = "30px";
domObject.style.background = "";

與domObject.classList.add('some-class');

和 CSS 將是：

.some-class {
  width: 800px;
  height: 500px;
  // etc...
}

Answer 2

將您的代碼移至工作示例。

注意：由於作者風格，只能全屏運行代碼片段。 =)

 const dosearch = () => { var query = document.getElementById('main').value; var url = fetch("https://api.tvmaze.com/search/shows?q=" + query) .then(response => response.json()) .then(data => { const myDiv = document.getElementById("myDiv"); myDiv.innerHTML = ''; // <---- this is for testing for (var i = 0; i < data.length; i++) { var showName = data[i].show.name; var showDescription = data[i].show.summary var results = document.createElement('div'); results.className = 'myResults'; var header = document.createElement('h2'); header.innerHTML = showName; results.appendChild(header); var desc = document.createElement('div'); desc.innerHTML = showDescription; results.appendChild(desc); myDiv.appendChild(results); } }); } document.querySelector('.search').addEventListener('keypress', function(e) { if (e.key === 'Enter') { dosearch(); } });

 #myDiv { width: 800px; height: 5000px; display: flex; flex-direction: column; margin: auto; border-radius: 30px; background: black; } .myResults { width: 600px; height: 400px; background: white; margin: auto; border-radius: 30px; font-family: Poppins; display: flex; flex-direction: column; } .myResults p, .myResults h2 { margin: 1em; }

 <input type="text" id="main" class="search" style="margin-bottom: 4px" value="Car" /><button onclick="dosearch()">Go</button> <div id="myDiv"></div>