Создание элемента кнопки с текстом

Question

На моей демонстрационной странице Я пытаюсь создать кнопку, которая неизбежно будет использоваться для закрытия модальных режимов. Я попробовал этот код:

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

В файле tinybox.js

CSS выглядит так:

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

Однако я не могу заставить кнопку появиться. Я думал, что что-то должно быть не так при выполнении всего модального кода, поэтому я попытался запустить это в Firebug, просто чтобы создать кнопку на ровном месте, и это тоже не сработало.

Кто-нибудь есть какие-либо рекомендации, пожалуйста?

Кроме того, как мне установить текст кнопки? Я попытался найти соответствующий «атрибут», но не смог найти его для текста кнопок.

Спасибо!

Answer 1

Давайте сделаем это официально:

Вы должны добавить элемент в DOM. Только его создание не добавляет его в дерево.

CSS применяется только к элементам в дереве DOM. Смотрите добавить элемент в DOM с JS .

Если вы хотите использовать jQuery, я предлагаю прочитать руководства и документацию (вы пометили вопрос с помощью jQuery, но вы используете простой интерфейс DOM, поэтому я не уверен, что вы после).

Вы можете установить содержимое элемента с помощью innerHTML:

x.innerHTML = 'Some Text';

С jQuery весь процесс будет просто:

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