JSの構築済み変数をHTMLに補完する

私は数週間前にウェブ開発を楽しく学習し始めました。私は、HTML、CSS、JSを使ってロックペーパーのはさみゲームを作成しています。 HTMLのブロックに何かを追加しようとしていますが、現在のコードでは何もしません。グーグルで多くのことをした後、私は質問を投稿しようと決めました。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>

出典

2016-09-20 Kert

prependはjqueryオブジェクトで、jqueryオブジェクトを作成します – madalinivascu

を作成し、jqueryの関数である、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);

ノート、ノー '' という、それはCHRないvarがあります。

あなたはとにかくDOMメソッドを使用したい場合、あなたは... は、実際に、私はGoogle経由で質問見つけることができます： "文書のhtmlプリペンド"、

使用DOMメソッド：

parentNode.insertBefore(newChild, refChild);

How can I implement prepend and append with regular JavaScript?

を

と、ここで：

Append and Prepend without JQuery?

出典

2016-09-20 08:44:45 CodeUnsolved

この問題をすべて解決してくれてありがとう、私はあなたと@madalin ivascuの両方を変更しましたが、まだ私はそれを伝えている行を表示していません。私はあなたのコメントに両方の方法を試しました。何かご意見は？ – Kert

あなたは簡単にjQueryを試すことができます。私はここでデモを作成する[1wvdnfmo]（https://jsfiddle.net/1wvdnfmo/3/）、あなたはそれを試すことができます。あなたはトリガー関数displayPlayedRoundsの周りに問題を抱えている可能性があります – CodeUnsolved

ありがとうございます。私は今働くようになった。 :) – Kert

prepend @madalin ivascuが言うように、jQueryオブジェクトまず

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

出典

2016-09-20 08:17:36 madalinivascu

JSの構築済み変数をHTMLに補完する

答えて

関連する問題