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

Question 1

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?

Question 2

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.

Question 3

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>

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

Verwenden von HTML + JavaScript:

PHP verwenden:

Warum Nowdoc in PHP verwenden?

Menu

Verwandte Inhalte

Weitere interessante Artikel