¿Hay un equivalente php echo / print en javascript

Digamos que quiero imprimir html desde dentro de una etiqueta de script.

Una fuente como esta

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

Debería verse algo como esto en el navegador después de que el script se haya ejecutado

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

Podría escribir mi propio código para este propósito, pero ya que esto me parece un problema muy simple, supongo que he perdido algo o mi pensamiento es defectuoso de alguna manera y la impresión se deja fuera intencionalmente.

También, algo relacionado: Me gustaría saber si un script es (o se puede hacer) consciente de las etiquetas de script que lo rodean. Con esta información sería mucho más fácil encontrar la posición para el código html impreso para ser inyectado, suponiendo que no es muy desaconsejado.

Para aclarar: No necesito que escribas una función de impresión para mí. Solo necesito saber si existe un método nativo para lograr esto y lo he perdido o, alternativamente, la razón por la que no se debe hacer.

EDITAR Me di cuenta de que no había pensado bien la pregunta.

Tengo mi hechos directamente y ahora casi todo parece estar funcionando. Debería haber mencionado originalmente que la función de impresión era necesaria dentro de las plantillas - estoy trabajando en un experimento de motor de plantillas. Me las arreglé para resolverlo separando los scripts de html simple y concatenando los scripts html sans divididos con la salida de script.

Mientras escribía el código me di cuenta de que todo no iría tan bien debido a la naturaleza asincrónica de js. Supongo que esperaba poder hacer cualquier cosa. tipo de magia js en plantillas, al igual que podría en php. Parece que soportar código asincrónico de una manera infalible dentro de las plantillas requerirá un poco más de pensamiento.

Author: jpeltoniemi, 2012-11-29
Source

9 answers

Necesitas usar document.write() 

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

Tenga en cuenta que esto solo funcionará si está en el proceso de escribir el documento. Una vez que el documento ha sido renderizado, llamando a document.write() borrará el documento y comenzará a escribir uno nuevo. Consulte otras respuestas proporcionadas a esta pregunta si este es su caso de uso.

 53
Author: Mike Brant,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-29 19:56:05

Puede usar el documento .write, sin embargo no es una buena práctica, puede borrar toda la página depende de cuándo se está ejecutando.

Puedes usar Element.innerHtml así: 

<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
Author: Lance,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
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) );
  }
};

Usando la ventana .log le permitirá realizar la misma acción que la consola.registro, pero comprueba si el navegador que está utilizando tiene la capacidad de utilizar la consola.inicie sesión primero,para no cometer errores por razones de compatibilidad (ES decir, 6, etc.).

 3
Author: Lil' Bits,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-30 22:12:37

Puede usar

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

Que reemplazará el script actualmente en ejecución que llamó a la función echo con el texto en el argumento content.

 2
Author: Awesomeness01,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-30 08:21:38

Desde la página de w3school en la salida de JavaScript ,

JavaScript puede "mostrar" datos de diferentes maneras:

Escribiendo en un cuadro de alerta, usando window.alerta().

Escribiendo en la salida HTML usando document.escribir().

Escribiendo en un elemento HTML, usando innerHTML.

Escribiendo en la consola del navegador, usando la consola.registro().

 1
Author: Max,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-30 01:04:06

Puede usar document.write o incluso console.write (esto es bueno para depurar).

Pero tu mejor apuesta y te da más control es usar DOM para actualizar la página.

 0
Author: Ed Heal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-29 19:43:06 
$('element').html('<h1>TEXT TO INSERT</h1>');

O

$('element').text('TEXT TO INSERT');
 0
Author: Zecrow,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-29 20:02:55

Esta es otra manera: 

<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
Author: hhaseli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-22 14:43:33

l('output text example')

Después de definir una vez

l=console.log

Me parece bien para una rápida depuración hacksy JS en la consola del navegador.

Basado en @Lil ' Bits respuesta – gracias!

 0
Author: Aaron Thoma,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-27 02:59:16