javascript中是否有php echo/print等价物答案

【问题标题】：Is there a php echo/print equivalent in javascriptjavascript中是否有php echo/print等价物
【发布时间】：2012-11-17 22:59:01
【问题描述】：

假设我想从脚本标签中打印 html。

这样的来源

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

脚本运行后在浏览器中应该是这样的

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

我可以为此编写自己的代码，但由于这在我看来是一个非常简单的问题，我猜要么我遗漏了某些东西，要么我的想法在某些方面存在缺陷，并且故意忽略了打印。

另外，有点相关：我想知道一个脚本是否（或可以制作）知道它周围的脚本标签。有了这些信息，就可以更容易地找到要注入的打印的 html 代码的位置，假设它不是非常不鼓励的话。

澄清一下：我不需要你为我编写打印函数。我只需要知道是否存在实现此目的的本机方法并且我错过了它，或者不应该这样做的原因。

编辑我意识到我没有考虑清楚这个问题。

我明白了我的事实，现在几乎一切似乎都在工作。我最初应该提到模板中需要打印功能——我正在做一个模板引擎实验。我设法通过将脚本与纯 html 分离并将拆分的 html sans 脚本与脚本输出连接起来来解决这个问题。

在编写代码时，我注意到由于 js 的异步特性，一切都不会那么顺利。我想我希望能够在模板中做任何类型的 js 魔术，就像我在 php 中一样。似乎在模板中以万无一失的方式实际支持异步代码需要更多考虑。

【问题讨论】：

标签： javascript echo

【解决方案1】：

你需要使用document.write()

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

请注意，这仅在您正在编写文档时才有效。文档渲染完成后，调用document.write() 将清除文档并开始编写新文档。如果这是您的用例，请参阅针对此问题提供的其他答案。

【讨论】：

啊，我在firebug的脚本面板中尝试了document.write()，它总是在写入之前清除页面。它似乎在实际的页面代码中工作。谢谢！
...经过更多测试后，在初始页面渲染之外调用它仍然会清除页面。
@Pichan：是的，完全正确。在写入文档时，document.write 会写入其中。编写完成后，document.write 创建一个new 文档并写入that。（如果您考虑一下，document.write 无法写入现有的完整文档是有道理的。在客户端下载整个页面并断开连接后，PHP 等效项将调用echo。虽然我承认，这种行为创建一个新文档有点奇怪；它可能不做任何事情更有意义。）
已接受答案。虽然我没有得到我需要的东西，但这最接近人们猜想我是在用我的意外模糊和不那么好的问题提出的问题。我明天会更新它。
-1：使用 document.write() 将内容注入页面是一种非常糟糕的方式。它会阻止页面呈现（或者您已经发现会重置它）。更好的解决方案是设置 span 或 div 元素的 innerHTML。

【解决方案2】：

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

使用window.log 将允许您执行与console.log 相同的操作，但它会检查您正在使用的浏览器是否具有首先使用console.log 的能力，以免因兼容性原因而出错（IE 6 等）。

【讨论】：

在第一段就笑了。遗憾的是，我不需要它来进行调试。
无赖！（对于未来的观众：使用它，然后在 FF、IE 或 Chrome 中打开您的控制台，点击F12）。
对我来说，Chrome 中的 <Ctrl>+<Shift>+<J> 优于 <F12>。

【解决方案3】：

您可以使用 document.write，但这不是一个好习惯，它可能会清除整个页面，具体取决于它的执行时间。

你应该像这样使用Element.innerHtml：

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

<script>
document.getElementById('insertHere').innerHTML = '<div>Print this after the script tag</div>';
</script>

【讨论】：

我知道这是一篇旧帖子，但我发现使用document.getElementById('element').innerHTML = 'your changes here'; 也可以工作，而且对我来说似乎更简单（以防万一其他人像我一样从谷歌搜索中走进来..）
@Partack 这是一种习惯，我不喜欢写长语句，通过创建一个变量我可以在以后重复使用它。如果您不需要重复使用该元素，那么您的写作风格就可以了。

【解决方案4】：

您可以使用document.write 甚至console.write（这对调试很有用）。

但你最好的选择是使用 DOM 来更新页面。

【讨论】：

【解决方案5】：

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

或

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

【讨论】：

我并不是要粗鲁，但这是我一直所说的关于 jQuery 如何影响 js 编码器群体的一个很好的例子。请至少提及代码需要 jQuery 才能运行。

【解决方案6】：

这是另一种方式：

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

【讨论】：

【解决方案7】：

你可以使用

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

这会将调用 echo 函数的当前执行脚本替换为 content 参数中的文本。

【讨论】：

这很好用，但请稍微修改一下：docment => 文档并删除 e.hidden = true;谢谢！
目前最好的答案，一定要置顶。
很好的答案。而不是
可能是一种改进，因为

可能暗示默认的 CSS 类

【解决方案8】：

来自w3school's page on JavaScript output，

JavaScript 可以以不同的方式“显示”数据：

使用 window.alert() 写入警告框。

使用 document.write() 写入 HTML 输出。

使用 innerHTML 写入 HTML 元素。

使用 console.log() 写入浏览器控制台。

【讨论】：

【解决方案9】：

我们会在 js 中创建自己的函数，例如 echo "Hello world"。

function echo( ...s ) // rest operator
 { 
   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");

注意： (...) rest 运算符用于在一个对象/数组中访问更多参数，要从对象/数组中获取值，我们应该使用 for 循环迭代整个对象/数组，和上面一样，s 是我保留的名字，你可以写任何你想要的。

【讨论】：