Come utilizzare YUI per individuare un ingresso per nome e inserire contenuto dopo

Question

Come posso utilizzare YUI per individuare un input di testo per nome e inserire un div dopo?

Ad esempio, questo non funziona:

<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

Come accennato, document.getElementsByName restituisce un array. Si consiglia di dare il vostro input un ID con lo stesso nome come attributo nome. (A parte:.. Questa è una pratica comune e buono per le forme Altre librerie js forniscono estensioni utile quando si esegue questa operazione)

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

notare anche l'uso di InsertAfter piuttosto che appendTo . Se non si desidera el ad essere un bambino del vostro elemento di input. Si vuole che sia il prossimo fratello. Gli ingressi non hanno figli. Inoltre, infine, si sta aggiungendo queste variabili al namespace globale. Questo può o non può essere un problema, ma è generalmente una buona idea per avvolgere il codice in una funzione anonima a meno che non si ha intenzione per le variabili di avere portata globale e riutilizzarli in seguito, ma d'altra parte si potrebbe desiderare di fornire uno spazio dei nomi corretta per loro .

La speranza che aiuta (e non troppe informazioni.);)

Answer 2

document.getElementsByName ( 'some_name') restituiscono sempre una collezione (un array), se si è certi che il nome sia univoco è possibile scrivere in modo sicuro questo.

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

Answer 3

Con YUI 3 ora è possibile farlo questo :

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

Ma tenere a mente YUI è stato sospeso !

Answer 4

È sostanzialmente messo una condizione e dire name = "some_name".
Vedere il codice qui sotto e osservare che è ancora non inserire il

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>