asked on

Insert a textbox into a span

I have a textbox object that I create like this:

var _textbox = document.createElement ("input");
_textbox.setAttribute ('type', 'text');
_textbox.setAttribute ('id', name);
_textbox.value = value;
_textbox.name = name;

Assuming I have a <span> on the page and have already assigned that to an object, what I want to do is insert that textbox into the span, something like this:

_span.innerHTML = _textbox;

Doing the above causes this to display on the page (not a textbox):

[object]

I'm aware that use the innerHTML property and "spell out" the HTML (i.e. <input name="somename" ... /> but I imagine that there must be some way to insert the object, and have it render the HTML for me, that's what I'm looking for.

Any help would be appreciated.

DonKyles

why don't you hidding the textbox in that field frist when the user do somthing then you visible that textbox

<span><input type="text" name="txtTestSpan" value="Test Span" style="visibility:hidden;"></span>

on the javascript when the user click or do something

function visibleTextBox()
{
document.poppedLayer = eval('document.all[\'txtTestSpan\']');
document.poppedLayer.style.visibility = "visible";
}

toddhd

ASKER

Thanks for the suggestion, but that's not what I'm looking for. The javascript needs to be portable, and I need to be able to pass any given span object at it, and then insert a textbox in there. I can't assume there will be a texbox in the span tag to begin with, I need to insert it. I will later want to change its properties and respond to events, which is easier to do with it being an object.

DonKyles

How about this way

_span.innerHTML = '<input type="text" id="' + name + '" value="' + value + '">';

toddhd

ASKER

Thanks Don - again, if you re-read the original question, I noted that I already know I can "spell out" the <input> as HTML. The question is, can I create a textbox object, and then insert that object into a given <span>?

NicksonKoh

Hi toddhd,

_textbox is an object and hence u get the display as u have seen.

You can simply add it as follows

var text = "button";
var name = "button1";
var value = "somevalue";
_span.innerHTML = "<input type='"+text+"' id='"+name+"' value='"+value+"' name='"+name+"'>";

Cheers
Nickson

ASKER CERTIFIED SOLUTION

DonKyles

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

gops1

Use appendChild. Like this:

<html>
      <head>
            <head>
                  <title>Script Demo Gops</title>
                  <script language="javascript">
                        function createText(){
                              var _textbox = document.createElement ("input");
                              _textbox.setAttribute ('type', 'text');
                              _textbox.setAttribute ('id', 'name');
                              _textbox.value = 'value';
                              _textbox.name = 'name';
                              document.getElementById('txtCont').appendChild(_textbox);
                        }
                  </script>
            </head>
<body>
      <span id="txtCont"></span>
      <br><input type="button" value="Create" onClick="createText()">
</body>
</html>