如何在html上动态添加<div>并在html中编写php

I want to use php to get Image file information in folder,and dynamic add image in div then add into web page,below is my code,but it does not work, please help me.

index.html

<div class="scrollContainer">   
  <?php
    var $i = 1;
    var $panel_id = "panel_";
    var $imgUrl = "./Img/";
    var $file=NULL;

    var $dir = opendir("Img");
    while( ($file = readdir($dir)) !== false ){
      $panel_id = $panel_id.$i;
      $imgUrl = $imgUrl.$file;
      echo "$('.scrollContainer').html("
          ."$('<div/>')"
          .".addClass('panel')"
          .".id(".$panel_id.")"
          .".append("
          ."$('<div/>')"
          .".addClass('inside')"
          .".append("
          ."$('<img/>')"
          .".attr('src',".$imgUrl.")"
          .")"
          .".append("
          ."$('<p/>')"
          .".text(".$file.")"
          .")"
          .")"
          .");";

      $panel_id = "panel_";
      $imgUrl = "./Img/";
      $i = $i + 1;
    } // while

    closedir( $dir );
  ?> 
<div>

I am new hand, please help me , I appreciate it.

You are combinate PHP with jquery create objects method???

You from PHP can write html code directly (I recomend a template sistaxis):

  <?php
    var $i = 1;
    var $panel_id = "panel_";
    var $imgUrl = "./Img/";
    var $file=NULL;

    var $dir = opendir("Img");

    ?>



    <div class="scrollContainer">

    <?php while( ($file = readdir($dir)) !== false ) : ?>

         <div src="panel" id="<?= $panel_id.$i ?>">
              <div class="inside">
                  <img src="img/<?= $imgUrl.$file ?>" />
                  <p><?= htmlentities($file) ?></p>
              </div>
         </div>  
      <?php $i++; ?>
    <?php endwhile; ?>

  <?php
  closedir( $dir );
  ?> 
  </div>