只有第一段附加javascript

Question

我試圖添加多個具有不同內部文本的“p”元素，但由於某種原因，總共只添加了一個段落元素，這似乎總是代碼中的最后一個。

我的代碼如下所示。 謝謝您的幫助。

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"); 在第一次附加它之后。 這將要求瀏覽器創建兩個段落並將它們都附加。