71

假设我想从脚本标签内打印 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 中一样。似乎实际上在模板中以一种万无一失的方式支持异步代码需要更多的思考。

4

9 回答 9

71

你需要使用document.write()

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

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

于 2012-11-29T19:21:26.317 回答
32

您可以使用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>
于 2012-11-29T19:32:10.500 回答
8

您可以使用

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

它将用内容参数中的文本替换调用 echo 函数的当前正在执行的脚本。

于 2015-03-17T23:59:31.017 回答
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 等）而出错.)。

于 2012-11-29T19:26:45.603 回答
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>

于 2015-01-22T14:43:33.980 回答
1

从 w3school 的 JavaScript 输出页面，

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

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

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

使用 innerHTML 写入 HTML 元素。

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

于 2015-09-30T01:04:06.997 回答
0

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

但是你最好的选择是使用 DOM 来更新页面，它给你更多的控制权。

于 2012-11-29T19:43:06.157 回答
0 
$('element').html('<h1>TEXT TO INSERT</h1>');

或者

$('element').text('TEXT TO INSERT');
于 2012-11-29T19:43:20.783 回答
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");

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

于 2019-01-08T13:46:27.810 回答