web-dev-qa-db-ja.com

JavaScriptに同等のPHPエコー/プリントがありますか

スクリプトタグ内から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コードが挿入される位置を見つけるのがはるかに簡単になります（それほど推奨されていない場合）。

明確にするために：私のために印刷機能を書く必要はありません。これを達成するためのネイティブなメソッドが存在するかどうかを知る必要があるだけで、それを逃したか、あるいは実行すべきでない理由を知りました。

EDIT私は質問を考え抜いていないことに気付きました。

私は事実をまっすぐに理解し、今ではほとんどすべてが機能しているようです。もともと、テンプレート内で印刷機能が必要であると言っていたはずです-私はテンプレートエンジンの実験に取り組んでいます。スクリプトをプレーンなhtmlから分離し、分割されたhtml sansスクリプトをスクリプト出力と連結することで、うまくいきました。

コードを書いているときに、jsの非同期性のためにすべてがそれほどスムーズにならないことに気付きました。私は、PHPでできるように、テンプレートであらゆる種類のjsマジックを実行できると期待していたと思います。テンプレート内でフールプルーフな方法で非同期コードを実際にサポートしているように思えますが、もう少し考える必要があります。

javascriptecho
55
jpeltoniemi

document.write()を使用する必要があります

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

これは、ドキュメントを作成中の場合にのみ機能することに注意してください。ドキュメントがレンダリングされたら、document.write()を呼び出すとドキュメントがクリアされ、新しいドキュメントの作成が開始されます。これがあなたのユースケースである場合、この質問に提供される他の回答を参照してください。

56
Mike Brant

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>
29
Lance
// 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
Lil' Bits

使用できます

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

echo関数を呼び出した現在実行中のスクリプトをcontent引数のテキストで置き換えます。

2
Awesomeness01

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

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

Window.alert（）を使用して、アラートボックスに書き込みます。

Document.write（）を使用してHTML出力に書き込みます。

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

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

1
Max

これは別の方法です：

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

// echo "Hello world"のようなjsで独自の関数を作成します。

function echo( ...s ) // write for more detail below
 { 
   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");

注： ...オブジェクト/配列として1つのより多くのパラメータにアクセスするためのドット、オブジェクト/配列から値を取得するには、forループまたは他のメソッドを使用してオブジェクト/配列全体を反復する必要がありますが、forは一般的です、以下のように、sは名前だけで、あなたが好きなものを書くことができます。

0
BloodyLogic

document.writeまたはconsole.writeを使用することもできます（これはデバッグに適しています）。

しかし、最善の策は、DOMを使用してページを更新することです。

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

または

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