Como usar YUI para localizar uma entrada pelo nome e inserção após o conteúdo

Question

Como posso usar YUI para localizar uma entrada de texto pelo nome e inserir uma div após ele?

Por exemplo, isso não 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 mencionado, document.getElementsByName retorna uma matriz. Você pode querer dar a sua entrada um ID com o mesmo nome como o atributo nome. (Aparte:.. Isso é comum e boa prática para formas Outros js bibliotecas oferecem extensões de votos quando você faz isso)

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

Além disso, observe o uso de insertAfter em vez de appendTo . Você não quer el ser uma criança do seu elemento de entrada. Você quer que ele seja o próximo irmão. Entradas não tem filhos. Além disso, por último, você está adicionando estas variáveis ??para o namespace global. Isto pode ou não pode ser um problema, mas é geralmente uma boa idéia para quebrar seu código em uma função anônima, a menos que você pretende para as variáveis ??ter escopo global e reutilizá-los mais tarde, mas então você pode querer fornecer um espaço de nomes adequada para eles .

Espero que ajude (e não muito info.);)

Answer 2

document.getElementsByName ( 'some_name') sempre retornam uma coleção (uma matriz), se tiver certeza de que o nome é único você pode seguramente escrever este.

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

Answer 3

Com YUI 3, agora você pode fazer 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>

Mas tenha em mente YUI está sendo interrompido !

Answer 4

Você basicamente colocar uma condição e dizer name = "some_name".
Veja o código abaixo e observe que ainda é se insere o

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>