Wie füge ich einen großen HTML-Block in JavaScript ein?

Lesezeit: 8 Minuten

Wie fuge ich einen grosen HTML Block in JavaScript ein
Hallo

Wenn ich einen HTML-Block mit vielen Tags habe, wie füge ich ihn in JavaScript ein?

var div = document.createElement('div');
div.setAttribute('class', 'post block bc2');
div.innerHTML = 'HERE TOO MUCH HTML that is much more than one line of code';
document.getElementById('posts').appendChild(div);

Wie mache ich es richtig?

  • Ich fürchte, ich verstehe die Frage nicht. Was ist “ein Block-HTML”? Vielleicht können Sie Ihren Problemcode darstellen, indem Sie ihn zur Frage hinzufügen.

    – Geuis

    29. Apr. ’13 bei 3:28

  • Fragst du, wie man den HTML-Code in ein paar Zeilen umschließt?

    – fardjad

    29. Apr. ’13 bei 3:28

  • Meinen Sie, wenn der HTML-String, den Sie einfügen möchten, sehr groß ?

    – gideon

    29. Apr. ’13 bei 3:29

  • Was Sie tun, scheint in Ordnung zu sein? Gibt es ein Problem oder etwas, das mit diesem Ansatz nicht funktioniert, und wie viel ist “großes HTML” in Byte genau?

    – adeneo

    29. Apr. ’13 bei 3:29


  • Diese Frage macht absolut Sinn und es ist eine wirklich gute Frage. Warum die Downvotes und die Schließung?

    – Keavon

    8. August ’13 um 18:00

Wie fuge ich einen grosen HTML Block in JavaScript ein
Danny Beckett

Diese Antwort verwendet keine Backticks/Vorlagenliterale/Vorlagenzeichenfolgen (``), die vom Internet Explorer nicht unterstützt werden.


Verwenden von HTML + JavaScript:

Sie könnten den HTML-Block in einem unsichtbaren Container aufbewahren (wie a <script>) in Ihrem HTML-Code, dann verwenden Sie dessen innerHTML zur Laufzeit in JS

Beispielsweise:

// Create a temporary <div> to load into
var div = document.createElement('div');
div.setAttribute('class', 'someClass');
div.innerHTML = document.getElementById('blockOfStuff').innerHTML;

// You could optionally even do a little bit of string templating
div.innerHTML = div.innerHTML
    .replace(/{VENDOR}/g, 'ACME Inc.')
    .replace(/{PRODUCT}/g, 'Best TNT')
    .replace(/{PRICE}/g, '$1.49');

// Write the <div> to the HTML container
document.getElementById('targetElement').appendChild(div);
.red {
    color: red
}
<script id="blockOfStuff" type="text/html">
    Here's some random text.
    <h1>Including HTML markup</h1>
    And quotes too, or as one man said, "These are quotes, but
    'these' are quotes too."<br><br>
    <b>Vendor:</b> {VENDOR}<br>
    <b>Product:</b> {PRODUCT}<br>
    <b>Price:</b> {PRICE}
</script>

<div id="targetElement" class="red"></div>

Idee aus dieser Antwort: JavaScript HERE-doc oder ein anderer Mechanismus für große Anführungszeichen?


PHP verwenden:

Wenn Sie einen besonders langen HTML-Block in PHP einfügen möchten, können Sie die Nowdoc-Syntax wie folgt verwenden:

<?php

    $some_var = " - <b>isn't that awesome!</b>";

    echo
<<<EOT
    Here's some random text.
    <h1>Including HTML markup</h1>
    And quotes too, or as one man said, "These are quotes, but 'these' are quotes too."
    <br><br>
    The beauty of Nowdoc in PHP is that you can use variables too $some_var
    <br><br>
    Or even a value contained within an array - be it an array from a variable you've set
    yourself, or one of PHP's built-in arrays. E.g. a user's IP: {$_SERVER['REMOTE_ADDR']}
EOT;

?>

Hier ist eine PHP-Fiddle-Demo des obigen Codes, den Sie in Ihrem Browser ausführen können.

Eine wichtige Sache zu beachten: Der <<<EOT und EOT; MUSS Seien Sie in ihrer eigenen Zeile, ohne Leerzeichen davor!


Warum Nowdoc in PHP verwenden?

Ein großer Vorteil der Verwendung der Nowdoc-Syntax gegenüber dem üblichen Starten und Stoppen Ihres PHP-Tags ist die Unterstützung von Variablen. Betrachten Sie die normale Vorgehensweise – wie im folgenden Beispiel gezeigt:

<?php

    // Load of PHP code here

?>

Now here's some HTML...<br><br>

Let's pretend that this HTML block is actually a couple of hundred lines long, and we
need to insert loads of variables<br><br>

Hi <?php echo $first_name; ?>!<br><br>

I can see it's your birthday on <?php echo $birthday; ?>, what are you hoping to get?

<?php

    // Another big block of PHP here

?>

And some more HTML!
</body>
</html>

Vergleichen Sie das mit der Einfachheit von Nowdoc.

  • Ich mag das. Eine Art Pseudo-Templating-Ding.

    – Geuis

    29. Apr. ’13 um 3:31

  • Kann ich Variablen in die Vorlage einfügen?

    – Hallo

    29. Apr. ’13 um 3:31


  • Ich befürworte dies, weil es eine richtige Abscheulichkeit ist und nicht etwas, was die meisten Entwickler jemals in Betracht ziehen würden, selbst wenn es funktioniert.

    – adeneo

    29. Apr. ’13 bei 3:41

  • Sie können auch mit replaceChild() kreativ werden, wenn Sie nicht möchten, dass der Knoten existiert, der einfach ein Platzhalter dafür ist, wo Sie schließlich den Inhalt haben möchten. Sehen Sie sich dies zur Inspiration an: developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild

    – Joshua Fricke

    15. November ’18 um 23:21

Template literals kann Ihr Problem lösen, da es das Schreiben von mehrzeiligen Zeichenfolgen und Zeichenfolgeninterpolationsfunktionen ermöglicht. Sie können Variablen oder Ausdrücke innerhalb von Strings verwenden (wie unten angegeben). Es ist einfach, leserfreundliches Bulk-HTML einzufügen.

Ich habe das fragliche Beispiel modifiziert und sehe es bitte unten. Ich bin mir nicht sicher, wie viel Browser kompatibel ist Template literals sind. Bitte lesen Sie über Vorlagenliterale Hier.

var a = 1, b = 2;
var div = document.createElement('div');
div.setAttribute('class', 'post block bc2');
div.innerHTML = `
    <div class="parent">
        <div class="child">${a}</div>
        <div class="child">+</div>
        <div class="child">${b}</div>
        <div class="child">=</div>
        <div class="child">${a + b}</div>
    </div>
`;
document.getElementById('posts').appendChild(div);
.parent {
  background-color: blue;
  display: flex;
  justify-content: center;
}
.post div {
  color: white;
  font-size: 2.5em;
  padding: 20px;
}
<div id="posts"></div>

  • Danke! Die Vorlagenliterale funktionierten für mich in Chrome 63.0.3239.59 (Official Build) Beta (64-Bit). Perl hat diese Art von Funktionen schon seit vielen Jahren, also war ich einigermaßen vertraut, obwohl ich den Fachbegriff in JavaScript nicht kannte. Ich füge CSS-Stile in ein Skript-Tag in meine Seite ein, die ich dynamisch erstelle.

    – Eric Hepperle – CodeSlayer2010

    27. November ’17 um 16:16

  • Diese beste Antwort hier.

    – klewis

    8. Dez. 18 um 12:56 Uhr

  • @klewis nicht überzeugt. Visual Studio explodiert mit Syntaxfehlern, wenn Sie dies versuchen, selbst wenn der Browser dies gut verarbeitet.

    – egmfrs

    10. Januar ’19 um 11:46

  • @gmfrs Ich habe das Gleiche erlebt, worüber Sie sprechen, wurde dann aber darauf hingewiesen, dass die Ursache möglicherweise an der fehlenden ES6-Unterstützung liegt, die beim Kompilieren von Code bereitgestellt wird. Mit der Erkenntnis ist ab hier alles gut.

    – klewis

    10. Januar ’19 um 13:18


  • Beachten Sie, dass Vorlagenliterale in keiner Version von Internet Explorer (auch nicht in Version 11) unterstützt werden, sie jedoch in MS Edge unterstützt werden. Sie werden auch nicht von Opera Mini, IE Mobile und Blackberry Browser unterstützt. Wenn Sie diese Browser unterstützen müssen, sollten Sie wahrscheinlich den oben von Danny Beckett beschriebenen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy