Comment utiliser YUI pour localiser une entrée par nom et insérer du contenu après

Question

Comment puis-je utiliser YUI pour localiser une entrée de texte par nom et insérer un div après?

Par exemple, cela ne fonctionne pas:

<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

Comme mentionné précédemment, document.getElementsByName renvoie un tableau. Vous pouvez donner à votre entrée une carte d'identité avec le même nom que l'attribut name. (A part:.. Cette situation est commune et de bonnes pratiques pour les formes autres bibliothèques js fournissent des extensions utiles lorsque vous faites cela)

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

Notez également l'utilisation de insertAfter plutôt que appendTo . Vous ne voulez pas el d'être un enfant de votre élément d'entrée. Vous voulez qu'il soit le frère suivant. Les entrées ne sont pas des enfants. Enfin aussi, vous ajoutez ces variables à l'espace de noms global. Cela peut ou peut ne pas être un problème, mais il est généralement une bonne idée d'envelopper votre code dans une fonction anonyme à moins que vous avez l'intention pour les variables d'avoir une portée globale et de les réutiliser plus tard, mais alors vous voudrez peut-être fournir un espace de noms approprié pour les .

L'espoir qui aide (et pas trop d'informations.);)

Answer 2

document.getElementsByName ( « some_name ») renvoient toujours une collection (un tableau), si vous êtes sûr que le nom est unique, vous pouvez en toute sécurité écrire ceci.

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

Answer 3

Avec YUI 3, vous pouvez maintenant faire cette :

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

Mais gardez à l'esprit YUI est interrompu !

Answer 4

Vous mettez essentiellement une condition et dire name = "some_name".
Voir le code ci-dessous et observez qui est encore n'insère l'e paragraphe

.

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