Tipp: Elegant HTML in JavaScript einbinden

Manchmal kommt es vor, dass HTML-Markup innerhalb von JavaScript eingebunden werden soll. Etwa so:

var htmlCode = "<div id='my-element'>Hello World</div>";

Ich nutze als doppelte Anführungszeichen, um den Code festzulegen. Der Nachteil: Ich kann innerhalb des HTML-Codes keine doppelte Anführungszeichen mehr verwenden (außer vielleicht wenn ich stattdessen \" benutze).

Außerdem habe ich ein Problem, wenn mein HTML-Code mehrere Zeilen haben soll. Sowas hier ist zum Beispiel nicht erlaubt:

var htmlCode = "<div id='my-element'>
    Hello World
</div>";

Die Lösung

Statt Anführungszeichen können Backquotes (`) benutzt werden:

var htmlCode = `
    <div id="my-element">
        Hello World, it's a me!
    </div>
`;

Damit kann ich mehrere Zeilen nutzen, sowie innerhalb meines Codes einfache ('), als auch doppelte (") Anführungszeichen nutzen.

Viele Editoren unterstützen außerdem Quellcode-Highlighting für HTML, wenn der Code in Backquotes geschrieben ist.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.