javascript - 将 JS 附加到 HTML

问题描述

我正在尝试将我的变量“showName”和“showDescription”附加到“结果”div 对象中。我尝试使用“innerHTML”添加它们，但我只是得到了显示的描述。我曾尝试制作额外的 div 以将“结果”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();
  }
});

在“汽车”中搜索的结果

标签： javascripthtmlcssdom

将您的代码移至工作示例。

注意：由于作者的风格，只能全屏运行片段。=)

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>

javascript - 将 JS 附加到 HTML

问题描述

解决方案

推荐阅读