2 Replies - 469 Views - Last Post: 27 July 2010 - 04:29 PM

#1 oneal.michaels  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 116
  • Joined: 25-June 10

Dynamically Create And Display An Element

Posted 27 July 2010 - 12:29 PM

At the moment i am using javascript to show and hide elements to show notifications, but this doesnt work well because i can not show more than one notification, so i would like to be able to dynamically create and destroy elements like:

create element
set class
set innerHTML
display
wait for user input and destroy

i tried google already and cant find anything, if anybody could assist me it would be greatly appreciated :)

Is This A Good Question/Topic? 0
  • +

Replies To: Dynamically Create And Display An Element

#2 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2836
  • View blog
  • Posts: 9,741
  • Joined: 08-August 08

Re: Dynamically Create And Display An Element

Posted 27 July 2010 - 02:42 PM

There may be a way to do that but in case there isn't, you could put an empty div in the html and write to it:
<div id="Some_div"></div>

Was This Post Helpful? 0
  • +
  • -

#3 oneal.michaels  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 116
  • Joined: 25-June 10

Re: Dynamically Create And Display An Element

Posted 27 July 2010 - 04:29 PM

I found the way to do it, it took a lot of googling to find it, i didnt want to use the empty div as that is how my app was already set up and i didnt like how only one notification could be shown at once, with this method more than one notification can be shown at a time, if additional coding was added to my function they could be shown at different heights also, when i complete my notification.js and notification.css files i will attatch it to a post but until then here are the main functions that do the work

//create the element and set id for future reference
var element = document.createElement("div");
element.setAttribute("id", "dynamicDiv");

//add text to the element
element.innerHTML = "some text";

//add element to the document
document.body.appendChild("element");

//remove element
var elementToRemove = document.getElementById("dynamicDiv");
document.body.removeChild("dynamicDiv");

//or
//this method could be used to remove an 
//element from anywhere in the document
/*
var elementToRemove = document.getElementById("dynamicDiv");
elementToRemove.parentNode.removeChild(elementToRemove);
*/



like i said, sometime in the next week i will complete those two files and post them up here in this forum or maybe in the tutorials...
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1