HTML, add/delete element inside div

  • Thread starter kolleamm
  • Start date
  • #1
391
35
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?
 

Answers and Replies

  • #2
34,654
10,796
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?
 
  • Like
Likes QuantumQuest
  • #3
391
35
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.
 
  • #4
33,934
5,583
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?
kolleamm said:
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?
 
  • Like
Likes QuantumQuest
  • #5
34,654
10,796
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.
 
  • Like
Likes QuantumQuest
  • #6
887
98
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.
 
  • #7
jtbell
Mentor
15,613
3,635
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!
 
  • #8
18,242
7,868
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.
 
  • #9
391
35
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.
 
  • #10
34,654
10,796
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
 
  • #11
18,242
7,868
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?
 
  • #12
391
35
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.
 
  • #13
18,242
7,868
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?
 
  • #14
jack action
Science Advisor
Insights Author
Gold Member
1,986
2,163
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 [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:
  • Like
Likes kolleamm
  • #15
391
35
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.
 
  • #16
391
35
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).
Interesting! Thanks! So basically I need to learn PHP
 
Last edited by a moderator:
  • #17
18,242
7,868
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.
 
  • Like
Likes kolleamm
  • #19
34,654
10,796
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, ...).
 
  • Like
Likes kolleamm

Related Threads on HTML, add/delete element inside div

  • Last Post
Replies
2
Views
996
Replies
3
Views
770
Replies
7
Views
873
Replies
26
Views
4K
  • Last Post
Replies
4
Views
2K
  • Last Post
Replies
11
Views
2K
  • Last Post
Replies
3
Views
59K
  • Last Post
Replies
3
Views
1K
  • Last Post
Replies
19
Views
958
Top