2

如何使用 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>
4

4 回答 4

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 成为输入元素的子元素。你希望它成为下一个兄弟姐妹。输入没有子级。最后，您将这些变量添加到全局命名空间。这可能是也可能不是问题，但是将代码包装在匿名函数中通常是一个好主意，除非您打算让变量具有全局范围并稍后重用它们，但是您可能希望为它们提供适当的命名空间.

希望有帮助（而不是太多的信息。）；）

于 2009-05-29T07:45:18.523 回答
1

document.getElementsByName('some_name') 总是返回一个集合（一个数组），如果你确定名字是唯一的，你可以安全地写这个。

var some_element = document.getElementsByName('some_name')[0];
于 2009-05-29T06:56:21.573 回答
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 已停产！

于 2015-04-01T22:46:18.377 回答
0

您基本上设置了一个条件并说 name="some_name"。
请参阅下面的代码并观察它仍然插入

段落。

<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>

于 2015-09-04T04:54:21.377 回答