logo标签列表

在JavaScript中是否有与PHP echo/print等效的方法？

javascriptecho
72

假设我想要在脚本标签内打印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与脚本输出连接起来来解决了这个问题。

当我编写代码时，我注意到由于js的异步性质，一切都不会那么顺利。我想我期望能够在模板中执行任何类型的js魔法，就像我可以在php中一样。看起来，在模板内部以一种绝对可靠的方式支持异步代码需要再思考一下。

9个回答
75

你需要使用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()，但它总是在写入之前清除页面。它似乎只能在实际页面代码中工作。谢谢！ - jpeltoniemi
经过进一步的测试，当在初始页面渲染之外调用时，它仍然会清除页面。 - jpeltoniemi
1
@Pichan：是的，完全正确。在文档编写过程中，document.write会将内容写入其中。一旦编写完成，document.write就会创建一个新的文档并写入其中。（如果您仔细想想，document.write无法写入现有的完整文档是有道理的。PHP的等效操作是在客户端下载整个页面并断开连接后调用echo。尽管我承认，创建新文档的行为有点奇怪；它可能更合理的做法是不做任何事情。） - ruakh
答案被接受了。虽然我没有得到我所需要的东西，但这是最接近我所猜测的，对于我的意外模糊和不太好想的问题。我明天会更新它。 - jpeltoniemi
-1：使用document.write()将内容注入页面是非常不好的方式。它会阻塞页面渲染（或者像你发现的那样重置它）。一个更好的解决方案是设置span或div元素的innerHTML。 - symcbean
32

您可以使用 document.write ，但这不是一个好的做法，它可能会在执行时清除整个页面。

您应该像这样使用 Element.innerHtml :


您应该像这样使用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>
9
我知道这是一篇旧文章，但我发现使用document.getElementById('element').innerHTML = 'your changes here';也可以起作用，而且对我来说似乎更简单（以防其他像我一样从谷歌搜索进来的人需要这个信息..） - Partack
2
@Partack 这是一种习惯，我不喜欢写长语句，通过创建一个变量，我可以在以后重复使用它。如果您不需要重复使用该元素，则您的写作风格也可以正常工作。 - Lance
9

您可以使用

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

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

这个很好用，但请稍微修改一下：docment => document并且删除e.hidden = true; 谢谢！ - Paul Nadolinskyi
2
到目前为止最好的答案，一定要置顶。 - HolyRandom
很棒的答案。使用<span>而不是<p>可能会更好，因为<p>可能暗示了默认的CSS类。 - coterobarros
5
// 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 等）而出错。

笑了，看到第一段。遗憾的是我不需要这个来进行调试。 - jpeltoniemi
1
糟糕！（对于未来的观众：使用此方法，在FF，IE或Chrome中打开控制台，请按“F12”键）。 - Lil' Bits
1
在Chrome中，我更喜欢使用<Ctrl>+<Shift>+<J>而不是<F12>。 - Aaron Thoma
1
这是另一种方法：

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

1

来自w3school关于JavaScript输出的页面,

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

使用window.alert()将数据写入警告框中。

使用document.write()将数据写入HTML输出中。

使用innerHTML将数据写入HTML元素中。

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

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

或者

$('element').text('TEXT TO INSERT');
26
不是有意无礼，但这里是我一直说的jQuery对js开发人员群体影响的典型例子。请至少提到代码需要jQuery才能运行。 - jpeltoniemi
0

你可以使用document.write，甚至是console.write（这对于调试很有用）。

但是，最好的方法并且它可以给你更多的控制权是使用DOM来更新页面。

0
我们可以在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");

注意：(...)剩余操作符用于在一个对象/数组中访问更多的参数，要从对象/数组中获取值，我们应该使用for循环迭代整个对象/数组，就像上面的例子一样，s只是我随便起的名字，你可以写任何你想要的名字。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接