2014-12-22 27 views
-1

我已經搜索在谷歌這一點,似乎無法找到我所期待的,所以請原諒我,如果這是重複或之前回答......和IM初學者在網頁設計和編程...PHP/CSS或JavaScript - 自動創建新的div

我試圖創建現有事業部以上新的div和推動老格下來的網頁,我將如何有效地做到這一點,我應該使用PHP,Javascript或CSS。這是一個評論部分,我知道我需要一個數據庫來保存評論,但我現在要做的就是創建重複的Divs,在提交時流下頁面。

HTML & PHP:

<html> 

<head> 

    <title>PHP Test</title> 
    <link href="style.css" rel="stylesheet" type="text/css"> 



</head> 

<body> 
<div id="wrapper"> 
<h2><u>Interactive</u></h2> 

        Let us and others know your thoughts on this subject... 
        <br /> 
        <h3>Thoughts:</h3> 

         <div id="form"> 
          <form action="" method="post" > 

           <textarea name="Comments" rows="8" cols="40" value="" ></textarea> 
           <input type="submit" value="Submit" name="submit" onclick="location.href='test.php'" /> 
          </form> 
         </div> 
       <div id="Quotes"> 

        In this section, will be where your thoughts are displayed for others to see... 

       <?php 

        $comments = $_REQUEST ['Comments']; 

         echo "<div id='comment'>".$comments."</div>"; 


       ?> 

       </div> 
</div> 
</body> 

</html> 

CSS:

body { 


} 
#wrapper { 
    margin: 0 auto; 
    width: 500px; 
    border: 1px solid black; 
} 
#comment { 

    border: 1px solid black; 
    padding: 5px; 
    margin: 5px; 
    text-align: center; 

} 

這是我在目前。

+0

哪裏是你試過的代碼? o_O –

+1

這是非常基本的,你有嘗試過什麼嗎?你應該對網絡編程做更多的研究 – mituw16

+0

抱歉我現在有的代碼是 – Ricky

回答

0

這麼多的方法...以下是JavaScript的解決方案,你仍然需要堅持到D b。我會選擇jQuery ajax方法,所以你不必重新加載整個頁面。

<!DOCTYPE=html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 


    <textarea id="message" onclick="this.value='';">garbage in garbage out</textarea> 

    <br /> 

    <input id="btnPostMessage" type="button" value="POST MESSAGE" /> 

    <br /> 

    <div id="comments"></div> 

    <script type="text/javascript"> 

     var btn = document.getElementById('btnPostMessage'); 
     btn.addEventListener('click', postmsg, false); 

     function postmsg() { 
      var date = new Date().toLocaleString(); 

      var msg = document.getElementById('message').value; 
      var e = document.getElementById('comments'); 
      var newPost = document.createElement('p'); 

      newPost.innerHTML = date + ": " + msg; 
      e.insertBefore(newPost, e.firstChild); 
     } 

    </script> 
</body> 
</html> 
0

這是jQuery中很容易實現。

假設你有你的div

列表或其他一些容器
<ul id="yourList"> 
<li>Item 1</li> 
</ul> 

$("#yourList").prepend("<li>Item 2</li>"); 

結果:

<ul id="yourList"> 
<li>Item 2</li> 
<li>Item 1</li> 
</ul>