Prepending constructed variable to HTML in JS

Question

I started learning web developing for fun a couple weeks ago and I'm creating a rock-paper-scissors game using HTML, CSS and JS. I'm trying to add something to a block of HTML, but failing to do so with my current code. After a lot of googling I decided to try posting my question.

I added the function I'm trying to add the lines from and the place I'm trying to add them to. As I said, my code is not working and I don't quite understand why.

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>

prepend is a jquery function, create a jquery object

madalinivascu
– madalinivascu

2016-09-20 08:16:45 +00:00
Commented Sep 20, 2016 at 8:16 — madalinivascu
– madalinivascu, Commented Sep 20, 2016 at 8:16

Community · Accepted Answer · 2017-05-23 11:48:29Z

1

firstly, as @madalin ivascu says, prepend is a jQuery function, not comes from DOM methods.

if you want use jQuery, it does a convenient way, you need "import/require/include" jQuery first. like:

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

then, you can use this:

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

note that, no '', it's a var not chr.

if you want use DOM methods anyway, you can... actually, i found you question via Google:"document html prepend",

use DOM Method:

parentNode.insertBefore(newChild, refChild);

How can I implement prepend and append with regular JavaScript?

and, here:

Append and Prepend without JQuery?

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Sep 20, 2016 at 8:44

CodeUnsolved

1201 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kert Over a year ago

Thank you for going through all this trouble, I changed what you and @madalin ivascu both said, but it is still not displaying the line I'm telling it to. I tried both of the ways you included in your comment. Any thoughts?

CodeUnsolved Over a year ago

for your easy going, you can try jQuery all the way. i create a demo here 1wvdnfmo, you can try it on. you may got problems around trigger function displayPlayedRounds

madalinivascu · Accepted Answer · 2016-09-20 08:17:36Z

1

prepend is a jquery function, create a jquery object

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

answered Sep 20, 2016 at 8:17

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Collectives™ on Stack Overflow

Prepending constructed variable to HTML in JS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related