Existe-t-il un équivalent PHP echo/print en javascript?

dis que je veux imprimer du html à partir d'une étiquette de script.

une source comme celle-ci

<div>foo</div>
<script>
print('<div>Print this after the script tag</div>');
</script>
<div>bar</div>

devrait ressembler à quelque chose comme ça dans le navigateur après que le script a lancé

<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>

je pourrais écrire mon propre code à cette fin, mais puisque cela me semble être un problème très simple, je suppose que soit j'ai manqué quelque chose ou ma pensée est défectueuse d'une certaine manière et l'impression est laissée de côté intentionnellement.

aussi, un peu apparenté: j'aimerais savoir si un script est (ou peut être fait) conscient des balises qui l'entourent. Avec cette information, il serait beaucoup plus facile de trouver la position dans laquelle le code html imprimé doit être injecté, en supposant qu'il ne soit pas fortement découragé.

Pour préciser: je n'ai pas besoin de vous pour écrire une fonction d'impression pour moi. J'ai seulement besoin de savoir si une méthode native pour atteindre ceci existe et je l'ai manqué ou alternativement la raison pour laquelle il ne devrait pas être fait.

EDIT J'ai réalisé que je n'avais pas réfléchi à la question.

j'ai eu mes faits et maintenant presque tout semble fonctionner. J'aurais dû mentionner à l'origine que la fonction d'impression était nécessaire à l'intérieur des gabarits - je travaille sur une expérience de moteur de gabarit. J'ai réussi à le faire en séparant les scripts du html simple et en concaténant les scripts html Sans avec la sortie de script.

Pendant que j'écrivais le code, j'ai remarqué que tout ne se passerait pas si bien à cause de la nature asynchrone de js. Je suppose que je m'attendais à être capable de faire n'importe quelle sorte de magie js dans les modèles, tout comme je pourrais le faire en php. Il semble que le fait de supporter le code async d'une manière infaillible à l'intérieur des modèles nécessitera plus de réflexion.

51
demandé sur jpeltoniemi 2012-11-29 23:19:47

9 réponses

vous devez utiliser document.write()

<div>foo</div>
<script>
document.write('<div>Print this after the script tag</div>');
</script>
<div>bar</div>

notez que cela ne fonctionnera que si vous êtes en train d'écrire le document. Une fois le document Rendu, appeler document.write() effacera le document et commencera à en écrire un nouveau. Veuillez vous référer à d'autres réponses à cette question si c'est votre cas d'utilisation.

53
répondu Mike Brant 2012-11-29 19:56:05

vous pouvez utiliser document.écrivez , cependant ce n'est pas une bonne pratique, il peut effacer la page entière dépend de quand il est exécuté.

vous pouvez utiliser Element.innerHtml comme ceci:

<div>foo</div>
<span id="insertHere"></span>
<div>bar</div>

<script>
var el = document.getElementById('insertHere');
el.innerHTML = '<div>Print this after the script tag</div>';
</script>
29
répondu Lance 2015-03-31 20:40:36
// 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) );
  }
};

utilisant fenêtre.journal vous permettent d'effectuer la même action que la console.journal, mais il vérifie si le navigateur que vous utilisez a la capacité d'utiliser la console.journal d'abord, afin de ne pas d'erreur pour des raisons de compatibilité (IE 6, etc.).

3
répondu Lil' Bits 2015-09-30 22:12:37

vous pouvez utiliser

function echo(content) {  
    var e = document.createElement("p");
    e.innerHTML = content;
    document.currentScript.parentElement.replaceChild(document.currentScript, e);
}

qui remplacera le script qui exécute actuellement la fonction echo par le texte dans l'argument content.

2
répondu Awesomeness01 2017-12-30 08:21:38

à Partir de w3school page sur JavaScript sortie ,

JavaScript peut "afficher" des données de différentes façons:

écrit dans une boîte d'alerte, en utilisant la fenêtre.alerte.)(

écrit dans la sortie HTML en utilisant le document.écrire.)(

écrit dans un élément HTML, en utilisant innerHTML.

écrit dans la console du navigateur, en utilisant console.journal.)(

1
répondu Max 2015-09-30 01:04:06

Vous pouvez utiliser document.write ou même console.write (c'est bon pour le débogage).

mais votre meilleur pari et il vous donne plus de contrôle est D'utiliser DOM pour mettre à jour la page.

0
répondu Ed Heal 2012-11-29 19:43:06
$('element').html('<h1>TEXT TO INSERT</h1>');

ou

$('element').text('TEXT TO INSERT');
0
répondu Zecrow 2012-11-29 20:02:55

c'est une autre voie:

<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>

0
répondu hhaseli 2015-01-22 14:43:33

l('output text example')

après avoir défini

l=console.log

me semble parfait pour un débogage rapide de hacksy JS dans la console du navigateur.

basé sur la réponse de @Lil 'Bits 1519110920" - merci!

0
répondu Aaron Thoma 2018-03-27 02:59:16