Cómo utilizar YUI para localizar una entrada por Nombre y después de insertar contenido

Question

¿Cómo puedo utilizar YUI para localizar una entrada de texto por su nombre e insertar un div después de que?

Por ejemplo, esto no funciona:

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

Answer 1

Como se mencionó, document.getElementsByName devuelve una matriz. Es posible que desee dar a su entrada de una identificación con el mismo nombre que el atributo de nombre. (Aparte:.. Esta es una práctica común y buena para las formas Otras bibliotecas js proporcionan extensiones de votos cuando se hace esto)

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

Observe también el uso de InsertAfter en lugar de appendTo . Usted no quiere que el sea un hijo de su elemento de entrada. Usted quiere que sea el siguiente hermano. Las entradas no tienen hijos. También, por último, va a añadir estas variables para el espacio de nombres global. Esto puede o no puede ser un problema, pero es generalmente una buena idea para envolver el código en una función anónima a menos que la intención de las variables a tener alcance global y usar más tarde, pero entonces es posible que desee proporcionar un espacio de nombres adecuado para ellos .

Espero que ayude (y no demasiada información.);)

Answer 2

document.getElementsByName ( 'some_name') siempre devuelve una colección (una matriz), si está seguro de que el nombre es único puede escribir esto con seguridad.

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

Answer 3

Con YUI 3 ahora puede hacer este :

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

Pero hay que tener en cuenta YUI está siendo descontinuado !

Answer 4

Es, básicamente, pone una condición y decir name = "some_name".
Ver el código abajo y observar que todavía no inserte el

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>