YUI create div in every input[type=text]

Question

Hi ~ pardon my ignorance, I'm new to YUI3. I would like to create a clear button in every input textbox. So my attempt is create a div and append to every input text. However my attempt fail.

Kindly need your guidance here on the code my tried below..

Thanks in advance!

YUI().use("node", function(Y) {
     Y.all('input[type=text]').each(function(node) {

         var outerDiv = Y.Node.create('<div class="clrInput">X</div>');
          outerDiv.setStyles({
                position:  absolute,
                left: node.get('offsetLeft')+this.get('width')-10,
                top: node.get('offsetTop'),
                width:node.get('width'),
                height:node.get('height')
        })

         node.appendTo(outerDiv);
      });
   });

Answer 1

The reason for why you are not seeing anything is that outerDiv never becomes a part of the DOM. It's created, and the input node is appended to it, but outerDiv itself is never added to the DOM.

node.appendTo(outerDiv);
Y.one('body').append(outerDiv);

Should solve that. Check out your script with that line added.