Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Insert a textbox into a span

Posted on 2006-11-29
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

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 + '">';
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.


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

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

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

In my daily work (mainly using, I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

721 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