JavaScript - Show a div without using display:none

Question

I have a div that I want to be "activated" on a click but only the first time, only when it doesn't exist yet ; I don't want to use display:none by default because when coming back to the page afterwards I would have to click again to make it appear.

To sum up, is there any way to "activate" a div instead of using show/hide? ( createElement and append would make a new one on each click...)

Answer 1

You can use appendTo() for that. If you give that div an unique ID, you can check if it exists

 $('button').on('click', function() { if( $('#uniqueID').length == 0 ) { $('<div id="uniqueID">This is a div</div>').appendTo('body'); } });

 div { border: 1px solid blue; margin: 1em; padding: 1em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Add div</button>