71

script タグ内から 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 の非同期性のためにすべてがスムーズにいかないことに気付きました。私は、php でできるのと同じように、テンプレートであらゆる種類の js マジックを実行できることを期待していたと思います。テンプレート内で確実な方法で非同期コードを実際にサポートするには、もう少し検討が必要なようです。

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 関数を呼び出した現在実行中のスクリプトが content 引数のテキストに置き換えられます。

于 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 と同じアクションを実行できますが、互換性の理由 (IE 6 など) でエラーが発生しないように、最初に使用しているブラウザーに console.log を使用する機能があるかどうかがチェックされます。 .)。

于 2012-11-29T19:26:45.603 に答える
1

JavaScript 出力に関する w3school のページから 、

JavaScript はさまざまな方法でデータを「表示」できます。

window.alert() を使用してアラート ボックスに書き込みます。

document.write() を使用して HTML 出力に書き込みます。

innerHTML を使用して、HTML 要素に書き込みます。

console.log() を使用して、ブラウザ コンソールに書き込みます。

于 2015-09-30T01:04:06.997 に答える
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 に答える
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 に答える