0

このコードの出力：

<?php
    echo "<script type='text/javascript'> $('#query-info').append('<div class=\"well\">')</script>";
    foreach ($_POST as $key => $entry)
    {
        echo "<script type='text/javascript'> $('#query-info').append('". $key . ": " . $entry . "<br />')</script>";
    }
    echo "<script type='text/javascript'> $('#query-info').append('</div>')</script>";
?>

は：

<div class="well"></div>
itemID: 1
<br>
</div>

余分な不要な（最初の）終了divに注意してください。

4

4 に答える 4

3

JavaScriptはHTMLに文字列を追加せず、完全な形式のDOMノード/要素を追加します。開始タグ、新しい要素、終了タグを追加する代わりに、要素を追加してから、新しく追加されたノードに1つまたは複数の子を追加します。

var newDiv = $('<div />', {'class' : 'well'}),
    otherDiv = $('<div />', {'class' : 'somethingElse'});
newDiv.appendTo('#query-info');
otherDiv.appendTo(newDiv);

上記の結果は次のようになります。

<div id="query-info">
    <div class="well">
        <div class="somethingElse"></div>
    </div>
</div>
于 2012-08-03T18:57:01.913 に答える
2

.appendHTMLノードのみを追加でき、開始タグまたは終了タグを追加することはできません。

PHPに全体を生成させ<div>、次に全体を生成させ.appendます。

<?php
    $HTML = '<div class="well">';
    foreach ($_POST as $key => $entry)
    {
        $HTML .= "$key: $entry<br/>";
    }
    $HTML .= '</div>';
    echo '<script type="text/javascript">$("#query-info").append("'.json_encode($HTML).'");</script>';
?>
于 2012-08-03T18:58:27.807 に答える
1

あなたはHTMLの観点から考えていますが、コードはDOMの観点から機能しています。 .append('<div class=\"well\">')テキストの文字列だけでなく、div全体を追加します。そのdivの子として物事を追加する必要があります。

var div = $('<div class=\"well\">').appendTo("#query-info");

//in the loop - add content to the div.well
div.append('". $key . ": " . $entry . "<br />');

PHPを使用してHTMLまたはjQueryを記述してDOMを構築する必要がありますが、おそらくPHPを使用してjQueryを記述すべきではありません。

于 2012-08-03T18:59:55.497 に答える
1

そのようなjqueryappend関数を呼び出すと、表示されているとおりに完全なノードが自動的に作成されます。あなたの場合におそらくやりたいことは、すべてのHTMLをjavascript文字列変数に出力し、次のように追加することです。

<?php
    $js_inner_html = '';
    foreach ($_POST as $key => $entry) {
        $js_inner_html .= $key . ': ' . $entry . '<br />';
    }
?>
<script type='text/javascript'>
    $('#query-info').append('<div class="well"><?php echo $js_inner_html; ?></div>');
</script>
于 2012-08-03T19:04:02.153 に答える