Question

我正在尝试添加多个＆＃34; p＆＃34;具有不同内部文本的元素，但由于某种原因，总共只有一个段落元素被追加，这似乎总是代码中的最后一个。

我的代码如下所示。谢谢你的帮助。

HTML：

<select>
<option>Movie Title</option>
  <option>Movie Actor</option>
  <option>Genre</option>
  <option>Release Year</option>
</select>
  <input type="text" id="search">

<button id="submitSearch">SUBMIT</button>

<div id="searchresult">



</div>

JAVASCRIPT：

var searchBtn = document.getElementById("submitSearch");
var userSearch = document.getElementById("search");
var resultDiv = document.getElementById("searchresult");

searchBtn.addEventListener("click",function(){
  var userMovie = userSearch.value.toLowerCase();
  //removing all white space from title
  var arraySearch = userMovie.split(" ");
  var convertedSearch = arraySearch.join("");
  if (!movies[convertedSearch]){
    console.log("Sorry, this does not match any DVD's you own");
  } else {
    var para = document.createElement("p");
    resultDiv.appendChild(para);
    para.innerText = "Title: " + movies[convertedSearch].title; 
    resultDiv.appendChild(para);
    para.innerText = "Cast: " + movies[convertedSearch].cast; 
  }
})

Answer 1

问题是你没有要求浏览器附加两个段落：你要求它追加相同的段落（para）两次。没有DOM元素可以同时在两个地方，所以它失败了。

第一次附加后，您需要重复para = document.createElement("p");。这将要求浏览器创建两个段落并将它们都附加。

只有第一段附加javascript

1 个答案: