PHP / CSS 或 Javascript - 自动创建新的 Div答案

【问题标题】：PHP / CSS or Javascript - Automatically create new DivsPHP / CSS 或 Javascript - 自动创建新的 Div
【发布时间】：2014-12-23 04:13:34
【问题描述】：

我在谷歌上搜索过这个，似乎找不到我要找的东西，所以如果之前重复或回答过，请原谅我......我是网页设计和编程的初学者......

我正在尝试在现有 Div 之上创建新 div 并将旧 div 向下推到页面下，如果我使用 PHP、Javascript 或 CSS，我将如何有效地做到这一点。这是一个 cmets 部分，我知道我需要一个数据库来保存 cmets，但我现在要做的就是创建重复的 Div，在提交时沿着页面向下流动。

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;

}

这是我目前所在的地方。

【问题讨论】：

你试过的代码在哪里？ o_O
这很基本，你试过吗？你应该对网络编程做更多的研究
对不起，我的代码现在在那里
尝试这样做，并发布尝试它的代码。不要发布甚至没有尝试过的代码并假装这是一次尝试。
如果您搜索“jquery dynamic add div to page”，第一个link 是一个堆栈问题，您应该研究一下。在您发布一个绝对存在的问题之前，也许多花一点时间研究会对您有所帮助。

标签： javascript php css

【解决方案1】：

这么多方法...这是javascript解决方案，您仍然需要坚持到数据库。我会选择 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>

【讨论】：

【解决方案2】：

这在 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>

【讨论】：