在 JS 中将构造变量添加到 HTML答案

【问题标题】：Prepending constructed variable to HTML in JS在 JS 中将构造变量添加到 HTML
【发布时间】：2017-01-28 01:45:51
【问题描述】：

几周前我开始学习网络开发以获取乐趣，我正在使用 HTML、CSS 和 JS 创建一个石头剪刀布游戏。我正在尝试向 HTML 块添加一些内容，但我当前的代码未能这样做。经过大量谷歌搜索后，我决定尝试发布我的问题。

我添加了我要从中添加行的功能以及我要添加它们的位置。正如我所说，我的代码不起作用，我不太明白为什么。

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是一个jquery函数，创建一个jquery对象

标签： javascript jquery html css

【解决方案1】：

首先，正如@madalin ivascu 所说，prepend 是一个 jQuery 函数，而不是来自 DOM 方法。

如果你想使用 jQuery，它有一个方便的方法，你首先需要“import/require/include” jQuery。喜欢：

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

那么，你可以使用这个：

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

请注意，不是 ''，它是 var 而不是 chr。

如果你想使用 DOM 方法，你可以... 实际上，我通过 Google 发现了你的问题：“document html prepend”，

使用 DOM 方法：

parentNode.insertBefore(newChild, refChild);

How can I implement prepend and append with regular JavaScript?

这里：

Append and Prepend without JQuery?

【讨论】：

感谢您解决所有这些麻烦，我更改了您和@madalin ivascu 所说的内容，但它仍然没有显示我告诉它的行。我尝试了您在评论中包含的两种方式。有什么想法吗？
为了您的轻松，您可以一路尝试jQuery。我在这里创建了一个演示1wvdnfmo，你可以试一试。您可能会遇到触发函数 displayPlayedRounds 的问题

【解决方案2】：

prepend是一个jquery函数，创建一个jquery对象

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

【讨论】：