HTML/CSS HTML, add/delete element inside div

[kolleamm]

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?

 

[mfb]

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?

 

[kolleamm]

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?

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.

 

[Mark44]

I'm trying to make a comments section for a webpage. Do I need to permanently alter the html code?

Yes, of course, but what does this have to do with adding or deleting something in a div?

Because every time I refresh my text disappears.

Maybe your browser is loaded a cached copy of the web page, and not the one you edited?

 

[mfb]

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.

 

[TurtleMeister]

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

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.

 

[jtbell]

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.

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!

 

[Greg Bernhardt]

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.

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.

 

[kolleamm]

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.

 

[mfb]

Basically what I want is to understand how to make my web page different without having to edit the source code myself.

• Have some script alter the source code files (usually a bad idea)
• Use a database

 

[Greg Bernhardt]

Basically what I want is to understand how to make my web page different without having to edit the source code myself.

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?

 

[kolleamm]

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?

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.

 

[Greg Bernhardt]

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.

Correct me if I'm wrong, but you are looking for an online website editor with drag and drop type functionality?

 

[jack action]

Basically what I want is to understand how to make my web page different without having to edit the source code myself.

That is what server-side scripts (PHP, ASP.NET, etc.) are for. When these scripts are called (for example 'https://example.com/article.php ' instead of 'https://example.com/article.html '), 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 ' - or POST from forms).

For example, here's what the file 'article.php' might look like:

<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).

 

[kolleamm]

Correct me if I'm wrong, but you are looking for an online website editor with drag and drop type functionality?

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.

 

[kolleamm]

That is what server-side scripts (PHP, ASP.NET, etc.) are for. When these scripts are called (for example 'https://example.com/article.php ' instead of 'https://example.com/article.html '), 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 ' - or POST from forms).

For example, here's what the file 'article.php' might look like:

<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).

Interesting! Thanks! So basically I need to learn PHP

 

[Greg Bernhardt]

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.

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.

 

[Greg Bernhardt]

Interesting! Thanks! So basically I need to learn PHP

PHP is one of many options

 

[mfb]

Interesting! Thanks! So basically I need to learn PHP

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, ...).