javascript - 在 JS 中将构造变量添加到 HTML

标签 javascript jquery html css

我几周前开始学习 Web 开发是为了好玩,我正在使用 HTML、CSS 和 JS 创建剪刀石头布游戏。我正在尝试向 HTML block 中添加一些内容,但我当前的代码无法做到这一点。经过大量谷歌搜索后,我决定尝试发布我的问题。

我添加了我尝试添加行的函数以及我尝试将它们添加到的位置。正如我所说,我的代码无法正常工作,我不太明白为什么。

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>

最佳答案

首先,正如@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?

关于javascript - 在 JS 中将构造变量添加到 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39588930/

相关文章:

javascript - 如何使用selenium从下拉列表中选择一个项目? - 没有选择标签

javascript - 如何通过点击循环浏览图像?

html - IE 中文本框周围的边框断开

javascript - slideToggle() jquery 期间的异常填充/边距

javascript - 如何用显示 "search"的按钮替换谷歌自定义搜索引擎的放大镜?

javascript - 使用 JQuery 从 html5 视频播放器触发事件

javascript - 按钮单击上的 setTimeout 事件不起作用

javascript - 刷新时 Bootstrap 多选创建新的多选元素

jquery - 隐藏在div后面的下拉菜单

javascript - 为移动设备实现切换菜单,但整个导航栏都是可点击的,我只想点击按钮