Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

HTML, add/delete element inside div

  1. Jan 7, 2017 #1
    I'm searching for a way to add/delete an element in a div in my html code. So far I have only found ways to replace content of existing elements.

    <div class="example">
    empty....
    </div>

    how would I do this?
     
  2. jcsd
  3. Jan 7, 2017 #2

    mfb

    User Avatar
    2016 Award

    Staff: Mentor

    JavaScript can delete objects (and do basically everything with the code). css can hide objects or make them visible. If you want to get rid of it completely in HTML, you can just delete it in the source code.

    What exactly do you want to do?
     
  4. Jan 7, 2017 #3
    I'm trying to make a comments section for a webpage. Do I need to permanently alter the html code? Because every time I refresh my text disappears.
     
  5. Jan 7, 2017 #4

    Mark44

    Staff: Mentor

    Yes, of course, but what does this have to do with adding or deleting something in a div?
    Maybe your browser is loaded a cached copy of the web page, and not the one you edited?
     
  6. Jan 7, 2017 #5

    mfb

    User Avatar
    2016 Award

    Staff: Mentor

    This is a good example why you should not ask x-y-questions.

    I guess you don't want to give other users full access to modify your web page as they want. You'll need some defined interface where users can submit comments that get stored at your server, and accessed once the server delivers a web page. This is typically done with a database, e.g. an SQL database. The user submits text via an HTML form, a PHP site receives the submission and puts the text into a database. Every time the comments page is loaded, the server looks in the database for comments and puts them into the HTML code via PHP.
    (This can be extended in many ways: usernames together with the comments, user accounts, edit functionality, formatting tools, ...)

    If you don't understand all those components, better use some existing comment system. There is no need to reinvent the wheel if you just want simple comments.
     
  7. Jan 7, 2017 #6
    Thanks for that link. I had never heard of the "XY problem" but it made me laugh because I see it so often. And I'm sure I'm guilty of it myself. @kolleamm I don't think you can do what you want to do with just HTML and CSS. Rather than using a database as mfb suggested, you can also save the comments to a file. Either way I think this is something that will require some server side scripting. There are lots of online resources for learning PHP. Or, as mfb mentioned, there are probably scripts already written that you can just add to your page.
     
  8. Jan 8, 2017 #7

    jtbell

    User Avatar

    Staff: Mentor

    If you just want to get something done, I agree. If this is mainly intended as a learning exercise, that's another matter. In that case, I'd do as TurtleMeister suggested and store the comments in simple text files at first, while you focus on the user interface. Then, learn how to use a simple database (MySQL or whatever you have available on your system) for the comments instead. If you want to use this in the "real world" eventually, make sure to learn about how to guard against hacking via e.g. SQL injection!
     
  9. Jan 9, 2017 #8
    This is very confusing. I suspect you are not using a database? That is how you store information and then retrieve it. Not by physically adding or removing content from the actual page code.
     
  10. Jan 11, 2017 #9
    Thank you for your answers and sorry the confusion. I'm still fairly new to web development, so far I have only learned HTML,CSS, JS , and Angular JS. I have no knowledge at all of databases but as suggested by jtbell I will do some research on MySQL.

    Basically what I want is to understand how to make my web page different without having to edit the source code myself.
     
  11. Jan 11, 2017 #10

    mfb

    User Avatar
    2016 Award

    Staff: Mentor

    • Have some script alter the source code files (usually a bad idea)
    • Use a database
     
  12. Jan 11, 2017 #11
    This is a generally confusing statement. I think you need to be really really clear what your objectives are. What do you mean by different?
     
  13. Jan 11, 2017 #12
    For example if I had a website with an image, I can go online on my website, press a button and the image changes to another one. When I reload the page the image is still the second one it changed to.
     
  14. Jan 11, 2017 #13
    Correct me if I'm wrong, but you are looking for an online website editor with drag and drop type functionality?
     
  15. Jan 11, 2017 #14

    jack action

    User Avatar
    Science Advisor
    Gold Member

    That is what server-side scripts (PHP, ASP.NET, etc.) are for. When these scripts are called (for example 'https://example.com/article.php [Broken]' instead of 'https://example.com/article.html [Broken]'), the PHP script will write the HTML according to what you programmed it to do, and even based on user's input (such as GET queries - like 'https://example.com/article.php?comments=show [Broken]' - or POST from forms).

    For example, here's what the file 'article.php' might look like:
    PHP:
    <html>
        <head>
            <title>My Article</title>
        </head>
        <body>
            <h1>My Article Title</h1>
            <article>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut mauris in sem lacinia gravida. Fusce bibendum blandit neque non fringilla. Praesent tincidunt iaculis lectus, pellentesque scelerisque lacus tempus in. Nunc scelerisque non erat in luctus. Suspendisse nisl ipsum, commodo at felis nec, viverra feugiat ante. Morbi auctor mauris enim, id pharetra diam volutpat cursus. Morbi varius tempus risus, in cursus nunc aliquet et. Nullam varius aliquet tincidunt.</p>
            </article>
        <?php
            if(isset($_GET["comments"]) && $_GET["comments"] == "show"){
                include 'comments.php';
            }
        ?>
        </body>
    </html>
    And in the file 'comments.php', it would return the HTML script for the comment section (which were probably fetch from a database).
     
    Last edited by a moderator: May 8, 2017
  16. Jan 11, 2017 #15
    Not really. This page for example, whenever somebody posts a reply it stays on the page even if someone refreshes it, that's what I'm trying to accomplish, make a permanent change to a page on my website.
     
  17. Jan 11, 2017 #16
    Interesting! Thanks! So basically I need to learn PHP
     
    Last edited by a moderator: May 8, 2017
  18. Jan 11, 2017 #17
    Nothing is permanent, but yes you are looking to insert information into a database via a server side language, storing it in the database and then retrieving it with again the server side language.
     
  19. Jan 11, 2017 #18
    PHP is one of many options
     
  20. Jan 11, 2017 #19

    mfb

    User Avatar
    2016 Award

    Staff: Mentor

    Yes. It is not the only option, but nearly everything more advanced than a static plain web page with some text uses PHP in some way. This forum uses PHP on every page you can access and a database to store everything (user data, threads, posts, ...).
     
Know someone interested in this topic? Share this thread via Reddit, Google+, Twitter, or Facebook

Have something to add?
Draft saved Draft deleted



Similar Discussions: HTML, add/delete element inside div
  1. HTML question (Replies: 4)

Loading...