Блог

Главная - Вопросы по программированию - Добавить кнопку на HTML-страницу с помощью Javascript

Добавить кнопку на HTML-страницу с помощью Javascript

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

Я пытаюсь изменить HTML-разметку страницы, чтобы добавить какую-либо кнопку с помощью JavaScript.

Ниже вы можете найти «фрагмент» (довольно длинный, прошу прощения, но мне действительно нужно, чтобы вы поняли структуру страницы) страницы, которую я пытаюсь изменить.

Мой код JavaScript вставляется расширением браузера (я могу успешно добавить JavaScript на страницу и запустить его), и единственная операция, которую он должен выполнить, — это добавить кнопку в нужное положение.

HTML-страница содержит <FORM> с таблицей в ней.
После нескольких строк и ячеек есть ячейка, которая содержит 3 кнопки ввода: 

 <input type="submit" name="submit" value="Set Ships">
<input type="button" name="sel" value="Select all" onclick="alert('Not Allowed.');">
<input type="button" name="desel" value="Deselect all" onclick="alert('Not Alloowed.');">

Я бы хотел, чтобы мой JavaScript-код размещал четвертую кнопку сразу после desel кнопки.
Это код, который я использую для добавления кнопки:

 function add() {
    var element = document.createElement("input");
    element.setAttribute("type", "button");
    element.setAttribute("value", "invert");
    element.setAttribute("name", "button3");
    element.setAttribute("onclick", "foo()");
    document.flotta.appendChild(element);
}

Очевидно, что этот код помещает кнопку прямо в конец моего документа, сразу после формы (с именем flotta ).

Я понял, что не могу использовать функцию, getElementById потому что <td> с тегом непосредственно перед кнопками не id связан.

Поэтому я спрашиваю, может ли кто-нибудь указать мне на решение для добавления четвертой кнопки в нужное место.

 <html>
    <head>
    <title>fee foo</title>  
        . . . head code
    </head>

<body >
    <div id="Layer" name="Layer" /*other attributes*/"></div>
    <table /*table attributes*/>
    . . . table content
    </table>
<form id="flotta" name="flotta" method="post" action="home.php?sel=gestioneflotta">
    <table /*table attributes*/>
        <tbody>
            <tr><td>
            <table /* attributes*/>
                <tbody><tr>
                <td /* attributes*/></td>
                <td /* attributes*/></td>
                <td /* attributes*/></td>
                </tr>
                <tr>
                <td /* attributes*/">amp;nbsp;</td>
                <td bgcolor="ffffff" background="bg/pergamena.jpg" align="center">
                <input type="submit" name="submit" value="Set Ships">
                <input type="button" name="sel" value="Select all" onclick="alert('Not Allowed.');">
                <input type="button" name="desel" value="Deselect all" onclick="alert('Not Alloowed.');">   </td>
                <td background="bg/menu_d.gif">amp;nbsp;</td>
                </tr>
                <tr>
                <td /* attributes*/" width="11" height="11"></td>
                <td /* attributes*/></td>
                <td /* attributes*/></td>
            </tr>
            </tbody>
            </table>
        </td></tr>
            <tr>
            . . . another row
            </tr>

        </tbody>
    </table>
</form>
<table border="0" cellspacing="0" cellpadding="0" align=center  width=510>
    . . . another table
</table>

<script type="text/javascript">
some script
</script>
</body>

</html>

Комментарии:

1. Не используйте setAttribute для настройки свойств кнопки; вместо этого используйте прямые свойства, например element.type = "button"; . Особенно не используйте этот синтаксис для назначения обработчиков событий, просто используйте element.onclick = foo; (или одну из стандартных функций DOM уровня 2).

2. @marcel спасибо за ваш совет, но мое внимание больше сосредоточено на том, как разместить элемент в правильном положении. вы можете помочь?

Ответ №1:

Следующий код должен получить td:

 var td = document.getElementsByName('desel')[0].parentNode;

По сути, он получает все поля / кнопки с именем ‘desel’ и, предполагая, что есть только одно, получает родительский элемент первого элемента (который должен быть td, содержащим кнопки).