我几周前开始学习 Web 开发是为了好玩,我正在使用 HTML、CSS 和 JS 创建剪刀石头布游戏。我正在尝试向 HTML block 中添加一些内容,但我当前的代码无法做到这一点。经过大量谷歌搜索后,我决定尝试发布我的问题。
我添加了我尝试添加行的函数以及我尝试将它们添加到的位置。正如我所说,我的代码无法正常工作,我不太明白为什么。
function displayPlayedRounds(winner) {
"use strict";
// <p class="roundCountPrev">
// <img src="/images/whiteRock.png" class="player1PrevRound"/>
// ← Round 4
// <img src="/images/blackPaper.png" class="player2PrevRound"/>
// </p>
var middlePart, toAppend;
if (winner === -1) {
middlePart = "Round " + movesMade + " →";
} else if (winner === 1) {
middlePart = "← 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"/>← 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?
并且,这里:
关于javascript - 在 JS 中将构造变量添加到 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39588930/