Zuweisung eines Html-Codeblocks an eine Javascript-Variable

Question

Wie lautet die Syntax, um einen Html-Codeblock in einer Javascript-Variablen zu speichern?

<div class='saved' >
<div >test.test</div> <div class='remove'>[Remove]</div></div>

Ich möchte den obigen Code einer Variablen 'test' zuweisen

var test = "<div class='saved' >
<div >test.test</div> <div class='remove'>[Remove]</div></div>";

aber es funktioniert nicht, welches ist die richtige Syntax für die Zuweisung des Codes?

TIA

Answer 1

Moderne Javascript-Implementierungen mit dem template Die Syntax mit Backticks ist auch eine einfache Möglichkeit, einen HTML-Codeblock einer Variablen zuzuweisen:

    const firstName = 'Sam';
    const fullName = 'Sam Smith';
    const htmlString = `<h1>Hello ${fullName}!</h1><p>This is some content \
        that will display. You can even inject your first name, ${firstName}, \
        in the code.</p><p><a href="http://www.google.com">Search</a> for \
        stuff on the Google website.</p>`;

Answer 2

Sie können ein Javascript-Objekt erstellen, dessen Schlüssel der Name des Html-Schnipsels ist und dessen Wert ein Array von Html-Strings ist, die miteinander verbunden sind.

var html = {
  top_crimes_template:
    [
      '<div class="top_crimes"><h3>Top Crimes</h3></div>',
      '<table class="crimes-table table table-responsive table-bordered">',
        '<tr>',
          '<th>',
            '<span class="list-heading">Crime:</span>',
          '</th>',
          '<th>',
            '<span id="last_crime_span"># Arrests</span>',
          '</th>',
        '</tr>',
      '</table>'
    ].join(""),
  top_teams_template:
    [
      '<div class="top_teams"><h3>Top Teams</h3></div>',
      '<table class="teams-table table table-responsive table-bordered">',
        '<tr>',
          '<th>',
            '<span class="list-heading">Team:</span>',
          '</th>',
          '<th>',
            '<span id="last_team_span"># Arrests</span>',
          '</th>',
        '</tr>',
      '</table>'
    ].join(""),
  top_players_template:
    [
      '<div class="top_players"><h3>Top Players</h3></div>',
      '<table class="players-table table table-responsive table-bordered">',
        '<tr>',
          '<th>',
            '<span class="list-heading">Players:</span>',
          '</th>',
          '<th>',
            '<span id="last_player_span"># Arrests</span>',
          '</th>',
        '</tr>',
      '</table>'
    ].join("")
};

Answer 3

Bitte verwenden Sie das Backtick-Symbol '`' am Anfang und am Ende der HTML-Zeichenfolge. Dies ist ein sogenanntes Schablonenliteral, mit dem Sie reines HTML in mehreren Zeilen schreiben und einer Variablen zuweisen können.

Beispiel >>

var htmlString =

`

<span>Your</span>
<p>HTML</p>

`