Как использовать YUI для поиска входных данных по имени и вставки содержимого после
-
06-09-2019 - |
Вопрос
Как я могу использовать YUI, чтобы найти вводимый текст по имени и вставить после него div?
Например, это не работает:
<input name="some_name" type="text">
<script>
var el = new YAHOO.util.Element(document.createElement('div'));
var some_element = document.getElementsByName('some_name');
// doesn't work .... replacing 'some_element' with 'document.body' works
el.appendTo(some_element);
</script>
Решение
Как уже упоминалось, document.getElementsByName возвращает массив.Возможно, вы захотите присвоить своим входным данным идентификатор с тем же именем, что и атрибут name.(В сторону:Это обычная и хорошая практика для формуляров.Другие библиотеки js предоставляют полезные расширения, когда вы делаете это.)
<input name="some_name" id="some_name" type="text">
<script>
(function () {
var el = new YAHOO.util.Element(document.createElement('div'));
// var some_element = document.getElementByName('some_name')[0];
var some_element = document.getElementsById('some_name'); // preferred, faster
// el.appendTo(some_element);
YAHOO.util.Dom.insertAfter(el,some_element);
})();
</script>
Также обратите внимание на использование insertAfter , а не appendTo.Вы не хотите, чтобы el был дочерним элементом вашего элемента ввода.Ты хочешь, чтобы это был следующий брат или сестра.Входные данные не имеют дочерних элементов.И, наконец, вы добавляете эти переменные в глобальное пространство имен.Это может быть проблемой, а может и не быть, но, как правило, хорошей идеей является обернуть ваш код в анонимную функцию, если только вы не хотите, чтобы переменные имели глобальную область видимости, и повторно использовать их позже, но тогда вы можете захотеть предоставить для них подходящее пространство имен.
Надеюсь, это поможет (и не слишком много информации.) ;)
Другие советы
document.getElementsByName('some_name') всегда возвращает коллекцию (массив), если вы уверены, что имя уникально, вы можете смело написать это.
var some_element = document.getElementsByName('some_name')[0];
С помощью YUI 3 теперь вы можете делать это:
<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
<input id="some_id" type="text">
<script>
YUI().use('node', function(Y) {
var contentNode = Y.Node.create('<p>');
contentNode.setHTML('This is a para created by YUI...');
Y.one('#some_id').insert(contentNode, 'after');
});
</script>
Но имейте в виду Производство YUI прекращается!
По сути, вы ставите условие и говорите name="some_name".
Посмотрите приведенный ниже код и обратите внимание, что is по-прежнему вставляет
араграф.
<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
<input id="some_id" type="text" name="inpuname" >
<script>
YUI().use('node', function(Y) {
var contentNode = Y.Node.create('<p>');
contentNode.setHTML('Paragraph created by YUI by searching for *INPUNAME*...');
Y.one('input[name="inpuname"]').insert(contentNode, 'after');
});
</script>