如何使用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>
答案 0 :(得分:4)
如上所述,document.getElementsByName返回一个数组。您可能希望为输入提供与name属性同名的ID。 (旁白:这是表单的常见和良好实践。其他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成为你输入元素的孩子。你希望它成为下一个兄弟姐妹。输入没有孩子。最后,您将这些变量添加到全局命名空间。这可能是也可能不是问题,但是将代码包装在匿名函数中通常是个好主意,除非您打算让变量具有全局范围并在以后重用它们,但是您可能希望为它们提供适当的命名空间。
希望有帮助(而不是太多信息。);)
答案 1 :(得分:1)
document.getElementsByName('some_name')总是返回一个集合(一个数组),如果你确定该名称是唯一的,你可以安全地写这个。
var some_element = document.getElementsByName('some_name')[0];
答案 2 :(得分:0)
使用YUI 3,您现在可以执行this:
<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>
答案 3 :(得分:0)
你基本上提出一个条件并说出姓名=&#34; some_name&#34;。
请参阅下面的代码并观察仍然插入
aragraph。
<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>
&#13;