Vorbereitete konstruierte Variable zu HTML in JS

Ich habe vor ein paar Wochen begonnen, Web-Entwicklung zum Spaß zu lernen und ich erstelle ein Stein-Papier-Schere-Spiel mit HTML, CSS und JS. Ich versuche, etwas zu einem HTML-Block hinzuzufügen, dies aber mit meinem aktuellen Code nicht zu tun. Nach vielem Googeln entschied ich mich, meine Frage zu stellen.Vorbereitete konstruierte Variable zu HTML in JS

Ich habe die Funktion hinzugefügt, die ich versuche, die Zeilen hinzuzufügen, und den Ort, an dem ich versuche, sie hinzuzufügen. Wie gesagt, mein Code funktioniert nicht und ich verstehe nicht warum.

function displayPlayedRounds(winner) { 
 
    "use strict"; 
 
// <p class="roundCountPrev"> 
 
//  <img src="/images/whiteRock.png" class="player1PrevRound"/> 
 
//   &larr; Round 4 
 
//  <img src="/images/blackPaper.png" class="player2PrevRound"/> 
 
// </p> 
 
    var middlePart, toAppend; 
 
    if (winner === -1) { 
 
     middlePart = "Round " + movesMade + " &rarr;"; 
 
    } else if (winner === 1) { 
 
     middlePart = "&larr; Round " + movesMade; 
 
    } else { 
 
     middlePart = "Round " + movesMade; 
 
    } 
 
    
 
    toAppend = "<p class='roundCountPrev'><img src=" + userImages[userChoice] + " class='player1PrevRound'/>" + middlePart + "<img src=" + compImages[compMove] + "class='player2PrevRound'/></p>"; 
 
    document.getElementById('displayPrevRounds').prepend('toAppend'); 
 
}

<span id='displayPrevRounds' class="player1">Previous rounds 
 
    <p class="roundCountPrev"> 
 
     <img src="/images/whiteRock.png" class="player1PrevRound"/>&larr; Round 4 
 
     <img src="/images/blackPaper.png" class="player2PrevRound"/> 
 
    </p> 
 
</span>

Quelle

2016-09-20 Kert

Prepend ist eine jquery Funktion, erstellen Sie ein jquery Objekt – madalinivascu

zunächst ein jquery Objekt erstellen, wie @madalin Ivascu sagt prepend eine jQuery Funktion ist, kommt nicht von DOM-Methoden.

Wenn Sie jQuery verwenden möchten, ist es eine bequeme Möglichkeit, Sie müssen zuerst jQuery "importieren/erfordern/einschließen". wie:

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
</head>

dann können Sie diese verwenden:

$('#displayPrevRounds').prepend(toAppend);

beachten Sie, dass, nein '', es ist ein var nicht chr.

wenn Sie DOM-Methoden verwenden möchten, wie auch immer, können Sie ... tatsächlich, ich habe Sie Frage über Google: "Dokument html prepend",

Verwendung DOM Methode:

parentNode.insertBefore(newChild, refChild);

How can I implement prepend and append with regular JavaScript?

und hier:

Append and Prepend without JQuery?

Quelle

2016-09-20 08:44:45 CodeUnsolved

Vielen Dank für all diese Probleme, ich änderte, was Sie und @ madalin ivascu beide sagten, aber es zeigt immer noch nicht die Zeile, ich sage es zu. Ich habe beide Möglichkeiten ausprobiert, die du in deinen Kommentar eingefügt hast. Irgendwelche Gedanken? – Kert

für Ihre Leichtigkeit, können Sie jQuery den ganzen Weg versuchen. Ich erstelle hier eine Demo [1wvdnfmo] (https://jsfiddle.net/1wvdnfmo/3/), Sie können es anprobieren. möglicherweise haben Sie Probleme mit der Triggerfunktion displayPlayedRounds – CodeUnsolved

Vielen Dank für Ihre Antwort. Ich habe es jetzt zur Arbeit gebracht. :) – Kert

prepend ist eine jquery Funktion

$('#displayPrevRounds').prepend(toAppend);

Quelle

2016-09-20 08:17:36 madalinivascu

Vorbereitete konstruierte Variable zu HTML in JS

Antwort

Verwandte Themen