CODEWITHSUNDEEP
javascriptjquerydom
pufAmuf
pufAmuf

Reputation: 7805

Creating button element with text

On My Demo Page I'm trying to create a button which will inevitably be used to close the modals. I tried this code:

x=document.createElement('button'); x.className='superclose';

In File tinybox.js

The CSS looks like this:

.superclose {position:absolute; top: 50px; left:50px; width:150px; height:50px;}

However I cannot get the button to show up. I thought that something must be wrong when executing the whole modal code so I tried to launch this in Firebug just to create the button out of the blue and that didn't work either.

Anyone have any recommendations please?

Also, how do I set the text of the button? I tried to find the corresponding 'attribute' but couldn't find one for the text of buttons.

Thanks!

Upvotes: 0

Views: 2063

Answers (1)

Felix Kling
Felix Kling

Reputation: 816580

Lets make it official:

You have to add the element to the DOM. Only creating it does not add it to the tree.

The CSS is only applied to elements in the DOM tree. See add element to the DOM with JS.

If you want to use jQuery I suggest to read its tutorials and documentation (you tagged the question with jQuery but you are using the plain DOM interface, so I'm not sure what you are after).

You can set the content of an element with innerHTML:

x.innerHTML = 'Some Text';

With jQuery, the whole process would simply be:

// creates the button and adds it to the body
$('<button />', {'class': 'superclose', text: 'Some Text'}).appendTo(document.body);

Upvotes: 2

Related Questions