最初の段落のみjavascriptを追加する

Question

複数の「p」要素をさまざまな内部テキストで追加しようとしていますが、何らかの理由で合計で1つの段落要素しか追加されません。これは常にコードの最後の部分です。

私のコードは以下の通りです。助けてくれてありがとう。

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

問題は、次の2つの段落を追加するには、ブラウザを求めていないということです：あなたは同じものを追加することを求めている（para ）を2回繰り返す。一度に2つの場所にDOM要素を配置することはできないため、失敗しています。

初めて追加すると、para = document.createElement("p");を繰り返す必要があります。それは、ブラウザに2つの段落を作成し、両方を追加するように要求します。