nur erster Absatz anhängendes Javascript

Question

Ich versuche, mehrere "p" -Elemente mit verschiedenen inneren Texten hinzuzufügen, aber aus irgendeinem Grund hängt nur ein Absatzelement insgesamt an, was immer der letzte im Code zu sein scheint.

Mein Code ist unten abgebildet. Danke für die Hilfe.

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

Das Problem ist, dass Sie nicht den Browser zu fragen zwei Absätze angefügt werden: Sie sind zu fragen das gleiche (para anhängen) zweimal. Kein DOM-Element kann gleichzeitig an zwei Stellen liegen, daher schlägt es fehl.

Sie müssen nach dem ersten Anhängen para = document.createElement("p"); wiederholen. Das fordert den Browser auf, zwei Absätze zu erstellen und beide anzufügen.