Insert a textbox into a span

Posted on 2006-11-29
Last Modified: 2010-05-18
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;  = 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):


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.
Question by:toddhd

Expert Comment

ID: 18042079
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\']'); = "visible";

Author Comment

ID: 18042174
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.

Expert Comment

ID: 18042274
How about this way

_span.innerHTML = '<input type="text" id="' + name + '" value="' + value + '">';
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.


Author Comment

ID: 18042322
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>?
LVL 17

Expert Comment

ID: 18042417
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+"'>";


Accepted Solution

DonKyles earned 500 total points
ID: 18042447
Ok my final answer for this answer

LVL 17

Expert Comment

ID: 18042456
Use appendChild. Like this:

                  <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';
                      = 'name';
      <span id="txtCont"></span>
      <br><input type="button" value="Create" onClick="createText()">

Featured Post

Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question