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

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;
        _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):


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\']');
      document.poppedLayer.style.visibility = "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 + '">';
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.


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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

856 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