Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Создание тега кнопки и вывод (https://javascript.ru/forum/events/31117-sozdanie-tega-knopki-i-vyvod.html)

vitorrio 27.08.2012 14:28

Создание тега кнопки и вывод
 
<div id="menu">
<input type="text"><br>
<input type="button" onclick="NewTeg()" value="Добавить кнопку">
</div>


По нажатии на кнопку создает новый тег инпут и добавляет в конец(перед закрывающим тегом DIV)
function NewTeg() {
var Div=document.getElementById('menu');
//Можно тупо так(наверно),но хотелось бы через объекты создать тег(если есть такой способ)
button='<input type="button" id="NewButton" value="Новая кнопка">';
//И вот вся проблема тут - Как ее добавить в конец дива?

Div.NewButton=button;

}


Можно конечно через InnerHTML, но это весь код придется обрабатывать...

lord2kim 27.08.2012 15:05

vitorrio,
function NewTeg() {
    var div=document.getElementById('menu');
    var button=document.createElement("input");
    button.setAttribute("type", "button");
    button.setAttribute("id", "NewButton");
    button.setAttribute("value", "Новая кнопка");
    /*можно сделать и так
    button.type = "button";
    button.id = "NewButton";
    button.value = "Новая кнопка";
    */
    div.appendChild(button);
}

vitorrio 27.08.2012 15:18

А почему нельзя изменить функцию onclick у кнопки таким способом?

function vers_dlya_pechati()
{
var 
ButPechat=document.getElementById('pechat');

//Это значение меняет
ButPechat.value='Вернуться назад';

alert(ButPechat.onclick);

//а Это нет - почему?
ButPechat.onclick='vers_dlya_prosmotra()';

//таким образом все-таки сменило
ButPechat.setAttribute("onclick", "vers_dlya_prosmotra()");


}

lord2kim 27.08.2012 15:25

vitorrio,
//а Это нет - почему?
//ButPechat.onclick='vers_dlya_prosmotra()';
ButPechat.onclick = vers_dlya_prosmotra;
//или
ButPechat.onclick = function () { vers_dlya_prosmotra() };

vitorrio 27.08.2012 15:40

lord2kim,
Странно, но чет не работает ни первый ни второй вариант, тупо все остается по старому, а setAttribute без проблем работает.

Вопрос еще один: Если у таблицы есть caption то к ней я могу обратиться таким образом:

//тут table - это не caption это сама таблица
var table=document.getElementById('table');
//Т.е. тут я обращаюсь как к вложенному элементу
table.caption.innerHTML='Текст';


Почему же я не могу обратиться к вложенному элементу input в блоке дива в примере который я написал в первом посте ? :

var Div=document.getElementById('menu');
//вместо input и id пробовал писать - просто не выводит окно
alert(Div.input.value)

vitorrio 27.08.2012 16:05

Еще вопрос про уничтожение элементов. Вот так нормально уничтожается:

var Div=document.getElementById('menu')
document.body.removeChild(Div);

А если я хочу уничтожить только кнопку добавляя ему id Например ?
Пробовал по разному нифига не выходит, если эту кнопку выносить за переделы дива то работает, а если внутри то нет, проблема вот тут :
document.body.Сюда что писать?.removeChild(button)

bes 27.08.2012 16:11

http://learn.javascript.ru/dom

bes 27.08.2012 16:14

Цитата:

Сообщение от vitorrio
document.body.Сюда что писать?.removeChild(button)

кто родитель, ссылку на того и надо писать перед removeChild(здесь ссылка на удаляемый элемент)
получить эти ссылки можно разными путями: по id, через children и т.п. (см.ccылку)

lord2kim 27.08.2012 16:29

Цитата:

Сообщение от vitorrio (Сообщение 200868)
lord2kim,
Странно, но чет не работает ни первый ни второй вариант, тупо все остается по старому, а setAttribute без проблем работает.

Вопрос еще один: Если у таблицы есть caption то к ней я могу обратиться таким образом:

//тут table - это не caption это сама таблица
var table=document.getElementById('table');
//Т.е. тут я обращаюсь как к вложенному элементу
table.caption.innerHTML='Текст';


Почему же я не могу обратиться к вложенному элементу input в блоке дива в примере который я написал в первом посте ? :

var Div=document.getElementById('menu');
//вместо input и id пробовал писать - просто не выводит окно
alert(Div.input.value)

можно обратиться по разному...
getElementById("id input-a"), getElementsByTagName("input")[№ input-a в div-e с 0-ля], div.(имя input-a).value

Цитата:

Сообщение от vitorrio (Сообщение 200872)
Еще вопрос про уничтожение элементов. Вот так нормально уничтожается:

var Div=document.getElementById('menu')
document.body.removeChild(Div);

А если я хочу уничтожить только кнопку добавляя ему id Например ?
Пробовал по разному нифига не выходит, если эту кнопку выносить за переделы дива то работает, а если внутри то нет, проблема вот тут :
document.body.Сюда что писать?.removeChild(button)

вы добавляли button к div с id = "menu", вот его туда и подсавляйте
document.getElementById("menu").removeChild(button);

Deff 27.08.2012 16:30

<div id="menu">
<input type="text"><br>
<input name="butt" type="button" onclick="NewTeg()" value="Добавить кнопку">
</div>

<script type="text/javascript">
function NewTeg(){
var Div=document.getElementById('menu');
var button_2=Div.getElementsByTagName('input')[1];
alert("button_2.value=>"+button_2.value)
Div.removeChild(button_2)
}
</script>


Часовой пояс GMT +3, время: 23:32.