Wie man YUI verwenden, um eine Eingabe von Namen zu suchen und einfügen Inhalt nach

Question

Wie kann ich YUI verwenden, um eine Texteingabe durch den Namen zu suchen und ein div, nachdem sie ein?

Zum Beispiel funktioniert das nicht:

<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

Wie bereits erwähnt, gibt document.getElementsByName einen Array. Vielleicht möchten Sie Ihre Eingabe einer ID mit dem gleichen Namen wie der Name Attribut geben. (Abgesehen:.. Dies ist üblich und gute Praxis für Formulare Andere js Bibliotheken hilfreich Erweiterungen bereitstellen, wenn Sie dies tun)

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

Beachten Sie auch die Verwendung von insert statt appendTo . Sie wollen nicht, el ein Kind Ihres Eingangselement sein. Sie wollen es die nächste Geschwister sein. Die Eingänge haben keine Kinder. Auch schließlich sind das Hinzufügen Sie diese Variablen auf den globalen Namespace. Dies kann oder kann nicht ein Problem sein, aber es ist generell eine gute Idee, um Ihren Code in einer anonymen Funktion zu wickeln, es sei denn Sie beabsichtigen, für die Variablen globale Reichweite zu haben und wieder verwenden sie später, aber dann könnten Sie einen richtigen Namensraum für sie zur Verfügung stellen möchten .

Ich hoffe, das hilft (und nicht zu viel Information.);)

Answer 2

document.getElementsByName ( ‚some_name‘) immer eine Sammlung zurückgeben (ein Array), wenn Sie sicher sind, dass der Name eindeutig ist, dass Sie dies sicher schreiben können.

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

Answer 3

Mit 3 YUI Sie jetzt tun können diese :

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

Aber bedenken Sie YUI eingestellt wird!

Answer 4

Sie setzen im Grunde eine Bedingung und sagen name = "some_name".
Sehen Sie den Code unten ein und beachten Sie, dass immer noch nicht legen Sie die

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>