Stel dat ik html wil afdrukken vanuit een scripttag.
Een bron als deze
<div>foo</div>
<script>
print('<div>Print this after the script tag</div>');
</script>
<div>bar</div>
zou er ongeveer zo uit moeten zien in de browser nadat het script is uitgevoerd
<div>foo</div>
<script>
print('<div>Print this after the script tag</div>');
</script>
<div>Print this after the script tag</div>
<div>bar</div>
Ik zou voor dit doel mijn eigen code kunnen schrijven, maar aangezien dit voor mij een heel eenvoudig probleem lijkt, vermoed ik dat ik iets heb gemist of dat mijn denkwijze op de een of andere manier gebrekkig is en dat het afdrukken opzettelijk is weggelaten.
Ook enigszins gerelateerd: ik zou graag willen weten of een script zich bewust is (of kan worden) van de scripttags eromheen. Met deze informatie zou het veel gemakkelijker zijn om de positie te vinden voor de gedrukte html-code waarin moet worden geïnjecteerd, ervan uitgaande dat dit niet sterk wordt ontmoedigd.
Ter verduidelijking: ik heb je niet nodig om een printfunctie voor mij te schrijven. Ik hoef alleen te weten of er een native methode bestaat om dit te bereiken en ik heb het gemist of de reden waarom het niet zou moeten worden gedaan.
BEWERKEN
Ik realiseerde me dat ik niet goed over de vraag had nagedacht.
Ik heb mijn feiten op een rij en nu lijkt bijna alles te werken. Ik had oorspronkelijk moeten vermelden dat de afdrukfunctie nodig was in sjablonen – ik werk aan een sjabloon-engine-experiment. Ik ben erin geslaagd om het uit te werken door scripts te scheiden van gewone html en de gesplitste html zonder scripts samen te voegen met scriptuitvoer.
Terwijl ik de code aan het schrijven was, merkte ik dat alles niet zo soepel zou gaan vanwege de asynchrone aard van JS. Ik denk dat ik verwachtte dat ik een soort van JS-magie in sjablonen zou kunnen doen, net zoals ik kon in PHP. Het lijkt erop dat het daadwerkelijk Async-code ondersteunt op een dwaasbestendige manier in sjablonen vereist wat meer gedachte.
1, Autoriteit 100%
U moet document.write()
<div>foo</div>
<script>
document.write('<div>Print this after the script tag</div>');
</script>
<div>bar</div>
Merk op dat dit alleen werkt als u in het proces van het schrijven van het document bent. Nadat het document is gegenereerd, belt u document.write()het document op en begin met het schrijven van een nieuwe. Raadpleeg andere antwoorden die aan deze vraag zijn verstrekt als dit uw gebruikscase is.
2, Autoriteit 46%
U kunt Document.Write gebruiken, maar het is geen goede praktijk, het kan de hele pagina duidelijk maken, is afhankelijk van wanneer het wordt uitgevoerd.
U moet Element.innerHtmlzoals deze gebruiken:
<div>foo</div>
<span id="insertHere"></span>
<div>bar</div>
<script>
document.getElementById('insertHere').innerHTML = '<div>Print this after the script tag</div>';
</script>
3, Autoriteit 10%
U kunt
gebruiken
function echo(content) {
var e = document.createElement("p");
e.innerHTML = content;
document.currentScript.parentElement.replaceChild(document.currentScript, e);
}
die het momenteel uitvoerende script vervangen Wie de ECHO-functie heeft gebeld met de tekst in het Content-argument.
4, Autoriteit 6%
// usage: log('inside coolFunc',this,arguments);
// http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function(){
log.history = log.history || []; // store logs to an array for reference
log.history.push(arguments);
if(this.console){
console.log( Array.prototype.slice.call(arguments) );
}
};
venster.log kunt u uitvoeren Dezelfde actie als console.log, maar het controleert of de browser die u gebruikt, de mogelijkheid heeft om console te gebruiken. Log eerst, om niet te fouten voor compatibiliteitsredenen (dwz 6, enz.).
5
Dit is een andere manier:
<html>
<head>
<title>Echo</title>
<style type="text/css">
#result{
border: 1px solid #000000;
min-height: 250px;
max-height: 100%;
padding: 5px;
font-family: sans-serif;
font-size: 12px;
}
</style>
<script type="text/javascript" lang="ja">
function start(){
function echo(text){
lastResultAreaText = document.getElementById('result').innerHTML;
resultArea = document.getElementById('result');
if(lastResultAreaText==""){
resultArea.innerHTML=text;
}
else{
resultArea.innerHTML=lastResultAreaText+"</br>"+text;
}
}
echo("Hello World!");
}
</script>
</head>
<body onload="start()">
<pre id="result"></pre>
</body>
6
van W3school’s pagina op JavaScript-uitvoer ,
JavaScript kan op verschillende manieren “gegevens” weergegeven:
Schrijven in een alertbox, met behulp van venster.Alt ().
Schrijven in de HTML-uitgang met behulp van document.write ().
Schrijven in een HTML-element, met behulp van INNERHTML.
Schrijven in de browserconsole, met behulp van console.log ().
7
U kunt document.writeof zelfs console.write(dit is goed voor foutopsporing).
Maar uw beste gok en het geeft u meer controle is om DOM te gebruiken om de pagina bij te werken.
8
$('element').html('<h1>TEXT TO INSERT</h1>');
of
$('element').text('TEXT TO INSERT');