说我想从脚本标签内打印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>
我可以为此目的编写我自己的代码但是因为这对我来说就像一个非常简单的问题,我猜我要么错过了某些东西,要么我的想法在某种程度上存在缺陷,并且故意排除了打印。 / p>
另外,有点相关:我想知道脚本是否(或可以制作)知道它周围的脚本标签。使用这些信息,可以更容易地找到要注入的打印html代码的位置,假设它不是非常气馁。
澄清一下:我不需要你为我写一个打印功能。我只需要知道是否存在实现此目的的本机方法,我已经错过了它或者不应该这样做的原因。
修改 我意识到我没有想到这个问题。
我直截了当地说明了事实,现在几乎所有事情似乎都在起作用。我应该最初提到模板内部需要打印功能 - 我正在进行模板引擎实验。我设法通过从简单的html中分离脚本并将分割的html sans脚本与脚本输出连接来解决这个问题。
当我编写代码时,我注意到由于js的异步性,一切都不会那么顺利。我想我希望能够在模板中做任何类型的js魔术,就像我在php中一样。似乎实际上在模板内部以傻瓜式方式支持异步代码需要更多考虑。
答案 0 :(得分:56)
您需要使用document.write()
<div>foo</div>
<script>
document.write('<div>Print this after the script tag</div>');
</script>
<div>bar</div>
请注意,这仅在您编写文档的过程中有效。文档渲染完成后,调用document.write()
将清除文档并开始编写新文档。如果这是您的使用案例,请参阅此问题提供的其他答案。
答案 1 :(得分:29)
您可以使用 document.write ,但这不是一个好习惯,它可能会清除整个页面取决于它何时被执行。
您可以像这样使用Element.innerHtml
:
<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>
答案 2 :(得分:3)
// 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等)。
答案 3 :(得分:2)
您可以使用
function echo(content) {
var e = document.createElement("p");
e.innerHTML = content;
document.currentScript.parentElement.replaceChild(document.currentScript, e);
}
将使用content参数中的文本替换当前正在执行的调用echo函数的脚本。
答案 4 :(得分:1)
来自w3school's page on JavaScript output,
JavaScript可以以不同的方式“显示”数据:
使用window.alert()写入警告框。
使用document.write()写入HTML输出。
使用innerHTML写入HTML元素。
使用console.log()写入浏览器控制台。
答案 5 :(得分:0)
您可以使用document.write
甚至console.write
(这适用于调试)。
但是你最好的选择是让你有更多的控制权来使用DOM来更新页面。
答案 6 :(得分:0)
$('element').html('<h1>TEXT TO INSERT</h1>');
或
$('element').text('TEXT TO INSERT');
答案 7 :(得分:0)
这是另一种方式:
<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>
答案 8 :(得分:0)
///我们将在js中创建自己的函数,例如echo“ Hello world”。
$('#payment-date-time-select').datetimepicker({
startView:2,
minView:2,
});
注意: ...喜欢在一个对象/数组中访问更多参数,要从对象/数组中获取值,我们应该使用for循环或其他方法来迭代整个对象/数组,但是for很常见,如下所示,而s是名字,我一直保留着,您可以编写任何内容。
答案 9 :(得分:-1)
l('output text example')
一旦定义
l=console.log
对于我在浏览器控制台中快速进行hacksy JS调试,似乎很好。
基于@Lil'Bits的answer - 谢谢!