ページを再読み込みせずに、読み込まれたhtmlページにhtmlコードを挿入するには？

Question

実行中のhtmlにhtmlコードを挿入しようとしていて、処理された後に、そのコードを削除します。 これは私が書いたものであり、なぜ動作しないのか理解できません。 引用符で区切って、divスパンに入れる文字列としてはいけませんか？

<div><span id="evolutionUpgrades"></span></div> 

var membrane = "bubble";

function evolutionUpgrade() { 
if (membrane == "bubble") { 
    if (evolution >= 1) { 
     document.getElementById("evolutionUpgrades").innerHTML = 
      '<p style="color:blue" title="Choose your evolution carefully.">Evolutions</p> < 
    <p title="Your  p title = "Your first evolution. Double wall bubbles were the first evolution of cells."><button" type="button"> onclick="doublebubble< button type = "button" 
     onclick = "doublebubble()"><b>Double" Bubble<> <b> Double Bubble < /b></button><button > < /p>' 
    } 
} 
}; 

function doublebubble() { 
membrane = "doublebubble" 
document.getElementById('membrane').innerHTML = "Double Bubble"; 
} 

これは進化変数が1以上になったときに、火災や機能場合、2つを実行してHTMLにコードを貼り付けコピーしなければなりません。

残念ながら、私のjavascriptは文字列として 'を無視し、コードをそのまま実行しようとしているようです。

if文をtrueにすると、クリックしたときに関数を実行するボタンが作成され、その関数を実行しても削除されないようにするにはどうすればいいですか？

私は間違ったフラグを使用していますか？ 句読点が間違っていますか？ 私は何を間違っているのか知らないのですか？ これを解決するのを手伝ってください。 私はそれから学ぶことができるようにあなたの答えを詳述してください。 説明せずにコードを修正するだけで、本当に助けにならないでしょう。

私は文法ミスを修正する人は気にしません。 しかし、コードを変更しないでください。 私は学ぶために壊れたものと修正されたものとの違いを知る必要があります。 特にコードを壊したとき。 Jason Wの修正を除いて、私のコードは正しいです。

Answer 1

文字列内のhtmlは問題ありませんが、文字列を複数の行に配置しているため、構文エラーが発生しています。 Javascriptが使用すると、文字列やセミコロンを閉じるのを忘れ仮定改行に解析する - どのように思慮深い:)

をこの問題を回避するには、最も簡単な方法は、改行文字をエスケープ（すべてのブラウザのために働く必要があります）、またはバックティックを使用する\を追加することです（ただし、ES6のサポートはあなたのアプリでのみOKです）。

document.getElementById("evolutionUpgrades").innerHTML = 
    '<p style="color:blue" title="Choose your evolution carefully.">Evolutions</p> \ 
    <p title="Your first evolution. Double wall bubbles were the first evolution of cells."><button type="button" onclick="doublebubble()"><b>Double Bubble</b></button></p>' 

*

Answer 2

が@Jasonが言ったことにに追加あなたのHTML内の改行をエスケープするために第1閉塞pタグの後に「\」を注目してください。

• evolutionはどこですか？入れ子のifは、evolutionという変数がない場合は機能しません。
• modern wayボタンにクリックイベントを追加することを検討することを検討してください。
• 私はおそらくimmediately invoked function expressionで完全なコードをラップし、その中の関数を呼び出します。

ちょうど私の2セントです。

Answer 3

jQueryを使用している場合は、を使用することもできます。、（）メソッドの代わりに、このようにHTMLを挿入する

$('#evolutionUpgrades').append(` 
    <p style="color:blue" title="Choose your evolution carefully.">Evolutions</p> 
    <p title="Your first evolution. Double wall bubbles were the first evolution of cells."><button type="button" onclick="doublebubble()"><b>Double Bubble</b></button></p> 
`) 

Answer 4

、あなたのメインのHTMLファイルにオプションのHTMLを含める追加した後/追加などhideとしてクラスを除去することによって、オンまたはオフにそれを回します。一般的に

<div> 
    <span id="evolutionUpgrades" class="hide"> 
    <p style="color:blue" title="Choose your evolution carefully.">Evolutions</p> 
    <p title="Your first evolution. Double wall bubbles were the first evolution of cells."> 
    <button type="button" onclick="doublebubble()"><b>Double Bubble</b></button> 
    </p> 
    </span> 
</div> 

var membrane = "bubble"; 

function evolutionUpgrade(){ 
    if (membrane == "bubble") { 
    if (evolution >= 1) 
     document.getElementById("evolutionUpgrades").classList.remove("hide"); 
    } 
} 

function doublebubble() { 
    membrane = "doublebubble"; 
    document.getElementById('membrane').innerHTML = "Double Bubble"; 
} 

.hide { display: none; } 

、それが挿入またはDOMから削除されている巨大な文字列としてHTMLを処理することを避けるために良いでしょう。あなたが見つけたように、引用や改行に関する問題にぶつかるでしょう。また、コードを読みにくくします。 HTMLをHTML、JSをJSとする。