javascript - How to use YUI to locate an Input by Name and insert content after - Stack Overflow

admin管理员组

文章数量:1430631

How can I use YUI to locate a text input by name and insert a div after it?

For example, this doesn't work:

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

How can I use YUI to locate a text input by name and insert a div after it?

For example, this doesn't work:

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

• javascript
• yui
• append
• element

Share Improve this question Follow edited May 28, 2009 at 22:56 edt asked May 28, 2009 at 22:41 edtedt 22.5k3333 gold badges8585 silver badges119119 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

As mentioned, document.getElementsByName returns an array. You may want to give your input an ID with the same name as the name attribute. (Aside: This is mon and good practice for forms. Other js libraries provide helpful extensions when you do this.)

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

Also notice the use of insertAfter rather than appendTo. You do not want el to be a child of your input element. You want it to be the next sibling. Inputs do not have children. Also lastly, you're adding these variables to the global namespace. This may or may not be a problem, but it's generally a good idea to wrap your code in an anonymous function unless you intend for the variables to have global scope and reuse them later, but then you might want to provide a proper namespace for them.

Hope that helps (and not too much info.) ;)

document.getElementsByName('some_name') always return a collection (an Array), if you are sure that the name is unique you can safely write this.

var some_element = document.getElementsByName('some_name')[0];

With YUI 3 you can now do this:

<script src="http://yui.yahooapis./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>

But keep in mind YUI is being discontinued!

You basically put a condition and say name="some_name".
See the code below and observe that is still does insert the

aragraph.

<script src="http://yui.yahooapis./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>

本文标签： javascriptHow to use YUI to locate an Input by Name and insert content afterStack Overflow