web-dev-qa-db-fra.com

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

Dites que je veux imprimer le code HTML à partir d'une balise 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 à ceci dans le navigateur après l'exécution du script

<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 comme cela me semble être un problème très simple, je suppose que j'ai oublié quelque chose ou que ma façon de penser est erronée et que l'impression est laissée de côté.

Aussi, quelque peu lié: je voudrais savoir si un script est (ou peut être rendu) conscient des balises de script qui l’entourent. Avec ces informations, il serait beaucoup plus facile de trouver la position dans laquelle le code html imprimé doit être injecté, à condition que cela ne soit pas fortement découragé.

Pour clarifier: je n'ai pas besoin que vous écriviez une fonction d'impression pour moi. Je veux seulement savoir s'il existe une méthode native pour y parvenir et je l'ai ratée ou bien la raison pour laquelle cela ne devrait pas être fait.

EDIT Je compris que je ne pensais pas à la question.

J'ai compris mes faits et maintenant, presque tout semble fonctionner. J'aurais dû mentionner à l'origine que la fonction d'impression était nécessaire dans les modèles - je travaille sur une expérience de moteur de modèle. J'ai réussi à résoudre ce problème en séparant les scripts du langage HTML brut et en concaténant les scripts sans HTML scindé avec la sortie de script.

En écrivant le code, j'ai remarqué que tout ne se passerait pas aussi bien à cause de la nature asynchrone de js. Je suppose que je m'attendais à être capable de faire n'importe quel type de magie Js dans les modèles, tout comme je le pouvais en php. On dirait que la prise en charge du code asynchrone de manière infaillible dans les modèles va demander plus de réflexion.

javascriptecho
55
jpeltoniemi

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 reporter aux autres réponses fournies à cette question s'il s'agit de votre cas d'utilisation.

56
Mike Brant

Vous pouvez utiliser document.write , mais ce n’est pas une bonne pratique, cela peut effacer toute la page en fonction du moment où elle est exécutée. 

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
Lance
// 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) );
  }
};

Utiliser window.log vous permettra d’effectuer la même action que console.log, mais il vérifie si le navigateur que vous utilisez a la possibilité d’utiliser console.log d’abord, afin de ne pas commettre d'erreur pour des raisons de compatibilité ( IE 6, etc.).

3
Lil' Bits

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 en cours d'exécution qui a appelé la fonction echo avec le texte de l'argument de contenu.

2
Awesomeness01

De la page de w3school sur la sortie JavaScript ,

JavaScript peut "afficher" des données de différentes manières:

Écrire dans un message d’alerte en utilisant window.alert ().

Ecrire dans la sortie HTML en utilisant document.write ().

Écrire dans un élément HTML à l'aide de innerHTML.

Écriture dans la console du navigateur, à l’aide de console.log ().

1
Max

c'est une autre manière:

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

// Nous créerions notre propre fonction en js, comme echo "Hello world".

function echo( ...s ) // write for more detail below
 { 
   for(var i = 0; i < s.length; i++ ) {


    document.write(s[i] + ' '); // quotes for space
   }

 } 

  // Now call to this function like echo

 echo('Hellow', "World");

Note: ... pour accéder à plus de paramètres dans un objet/tableau, pour obtenir une valeur d'objet/tableau, nous devrions itérer l'objet/tableau entier en utilisant for loop ou une autre méthode, mais c'est courant, comme ci-dessous et s est le nom que je viens de garder, vous pouvez écrire ce que vous voulez.

0
BloodyLogic

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

Mais votre meilleur pari et vous donne plus de contrôle consiste à utiliser DOM pour mettre à jour la page.

0
Ed Heal
$('element').html('<h1>TEXT TO INSERT</h1>');

ou

$('element').text('TEXT TO INSERT');
0
Zecrow