Question

I have the markup like that:

<div class="outer">
  <a class="btn">
   <img src="btnImg.jpg" />
  </a>
  Some Title
</div>

Now, I need to replace the text (Some Title thing) with a textbox that contains the current title.
I’ve tried that:

$(".outer").append("<input value='"+$(".outer").text()+"'></input>");
$(".outer").text("");

It puts a textbox with an empty string. I tried to store the text in a temporary variable, I tried to clone the entire outer div and then get the text, and empty the text in the original div. Anyway whatever I do, after I clear the text, input value also becomes empty.

Answer 1

Simply store the text in a variable and then clear the div prior to appending the input.

var $outer = $(".outer");
var text = $.trim($outer.text());

$outer.empty();
$outer.append("<input value='" + text + "'></input>");

http://jsfiddle.net/SJeyf/2/

UPDATE based on comment (retain image, etc.):

var $outer = $(".outer");
var text = $.trim($outer.text());

var $textNode = $(".outer").contents()
                    .filter(function(){
                        return this.nodeType == 3 
                               && $.trim($(this).text()).length;   
                    }).eq(0)

$textNode.replaceWith("<input value='" + text + "'></input>");

http://jsfiddle.net/SJeyf/4/

NOTE: There may be a better way to grab the correct text node, but this seems to work.