Заменить текстовую метку до или после тега ввода

Question

В HTML у меня есть несколько входных тегов с метками:

<label>Address <input type="text" name="address" /></label>
<label><input type="text" name="surname" /> Surname</label>

Я хочу изменить текст метки с помощью функции javascript.
Я знаю, что это возможно, например.с

input_name.parentNode.firstChild.nodeValue = "New label text";

К сожалению, метки находятся как до, так и после ввода.Итак, firstChild и lastChild.

Я знаю, что можно поместить метки в <span> и использовать getElementById.Но я предпочитаю нет.
Может быть, возможно также добавить id или for к метке ... Но я предпочитаю нет.

Как я могу легко заменить "первый брат TextNode до или после"вход "?

Answer 1

Вы можете перебрать childNodes, найти первый экземпляр TEXT_NODE и заменить текст.

var replaceText = function(inputName, newText) {
    var TEXT_NODE = 3, 
        input_name = document.getElementsByName(inputName)[0], 
        nodes = input_name.parentNode.childNodes;

    for (i = 0; i < nodes.length; i++) {
        if (nodes[i].nodeType === TEXT_NODE) {
            nodes[i].nodeValue = newText;
            break;
        }
    }
};

replaceText("address", "Not an Address");
replaceText("surname", "Not a Surname");

Пример для jsfiddle

Answer 2

Я бы настоятельно рекомендовал использовать кросс-браузерный фреймворк, такой как JQuery, вместо использования необработанного Javascript. Затем с Jquery:

$('input').bind("keyup", function(event) {
    var textNodes = $(this).parent().contents().filter(function() {
        return this.nodeType == Node.TEXT_NODE;
    });
    textNodes.each(function() { this.nodeValue = "bla"; });
});

Должно работать! Демо здесь: http://jsfiddle.net/Hh33v/6/

См. http://api.jquery.com/filter/ и http://api.jquery.com/contents/