• Registered: 2007-06-11
  • Posts: 230

Topic: Best practice for creating an HTML element on-the-fly?

I have a modal mask (a semi-transparent div that covers the entire screen so user can't interact with rest of app) that I'm using for an app.  However, to use the mask I'm just leaving an empty div on the layout like this:

<div id="mask"></div>

The CSS takes care of the rest and then I show/hide the mask as needed with JS.  It works, but is there a cleaner solution to this?  Do I really need a blank div on the layout just taking up space?  I'm thinking it would be cleaner to create the div dynamically with JS whenever I need the mask but I wasn't sure if this is a really good practice or looked down upon.

I'm curious how others do something like this.  Is it a good idea to create the mask div on the fly and then delete it when the mask is hidden then recreate, etc... ?

  • From: Belgium
  • Registered: 2008-11-25
  • Posts: 1,353

Re: Best practice for creating an HTML element on-the-fly?

You can create whatever you want with jQuery for example and insert this HTML code whenever you want on your page.

  • Registered: 2007-06-11
  • Posts: 230

Re: Best practice for creating an HTML element on-the-fly?

I was wondering if that is considered a good practice to do, though.  Should I create/delete the element when I want to use it or just show/hide the element that's already there?  I just wasn't sure what the best practice or accepted solution was.