PHP / CSS or Javascript - Automatically create new Divs

Question

I have searched on google for this and cannot seem to find what i am looking for, so please forgive me if this is duplicated or answered before... And im a beginner in web design and programming...

I am trying to create new divs above an existing Div and to push the older div down the page,How would i do this effectively, should i use PHP, Javascript or CSS. It is for a comments section, I know i need a database to save comments but all i am trying to do at the moment is to create repeating Divs that flow down the page upon submit.

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;

}

This is where i am at currently.

This is pretty basic, have you tried anything? You should do some more research into web programming — mituw16
– mituw16, Commented Dec 22, 2014 at 19:46
Attempt to do it, and post the code that attempts it. Don't post code that doesn't even attempt it and pretend that's an attempt. — developerwjk
– developerwjk, Commented Dec 22, 2014 at 19:48
if you search for "jquery dynamically add div to page" the first link is a stack question that is what you should look into. perhaps a little more time researching would be of benefit to you before you post a question that is most definitely out there. — indubitablee
– indubitablee, Commented Dec 22, 2014 at 19:58

NHNick603 · Accepted Answer · 2014-12-22 20:13:34Z

So many ways... here's javascript solution, you would still need to persist to the db. I would opt for jQuery ajax methods so you don't have to reload the entire page.

<!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>

Shooky · Accepted Answer · 2014-12-22 19:50:28Z

0

This is easily accomplished in jquery.

Assuming you have a list or some other container for your divs

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

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

RESULT:

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

answered Dec 22, 2014 at 19:50

Shooky

1,2999 silver badges16 bronze badges

Collectives™ on Stack Overflow

PHP / CSS or Javascript - Automatically create new Divs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related