создание поля ввода для HTML-формы ... но также добавление метки? - PullRequest
Новая
       27

создание поля ввода для HTML-формы ... но также добавление метки?

8 голосов
/ 23 декабря 2009

У меня есть HTML-форма. Когда вы нажимаете кнопку, функция JavaScript добавляет новое поле. Я пытаюсь, чтобы функция также добавила «метку» для поля.

Я пытался использовать document.createElement ("LABEL"), но это не позволяет мне изменить innerHtml (или, возможно, я делаю это неправильно ..), ни добавить закрывающую

Вот мой код. Спасибо! var instance = 2; 

        function newTextBox(element)
        {       
            instance++; 
            // Create new input field
            var newInput = document.createElement("INPUT");
            newInput.id = "text" + instance;
            newInput.name = "text" + instance;
            newInput.type = "text";
            instance++; 

            document.body.insertBefore(document.createElement("BR"), element);
            document.body.insertBefore(newInput, element);

        }
    </script>
</head>


<body>
    <LABEL for="text1">First name: </LABEL>
    <input id="text1" type="text" name="text1">
    <LABEL for="text2">Last name: </LABEL>
    <input id="text2" type="text" name="text2">



    <input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>

Ответы [ 3 ]

7 голосов
/ 08 февраля 2012

Пример с Винсента не работает.

Попробуйте это: 

var newlabel = document.createElement("Label");
    newlabel.setAttribute("for",id_from_input);
    newlabel.innerHTML = "Here goes the text";
parentDiv.appendChild(newlabel);
7 голосов
/ 23 декабря 2009 
   function newTextBox(element)
            {               
                    instance++; 
                    // Create new input field
                    var newInput = document.createElement("INPUT");
                    newInput.id = "text" + instance;
                    newInput.name = "text" + instance;
                    newInput.type = "text";

                    var label = document.createElement("Label");

                    label.htmlFor = "text" + instance;
                    label.innerHTML="Hello";
                    instance++; 

                    document.body.insertBefore(document.createElement("BR"), element);
                    document.body.insertBefore(newInput,element);
                    document.body.insertBefore(label, newInput);

Обратите внимание, что для атрибута тега label, соответствует свойству htmlFor для объекта метки в javascript

0 голосов
/ 21 ноября 2012 
<div id="somediv">
 some div
</div>

<script>

var instance = 0;

function newTextBox(element){               

instance++; 
// Create new input field
var newInput = document.createElement("INPUT");
newInput.id = "text" + instance;
newInput.name = "text" + instance;
newInput.type = "text";

var newlabel = document.createElement("Label");
newlabel.setAttribute("for","text" + instance);
newlabel.innerHTML = "Here goes the text";
document.getElementById("somediv").appendChild(newlabel);
document.getElementById("somediv").appendChild(newInput);
}

</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...