replace text with input

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.

James Montagne · Accepted Answer · 2011-07-25T21:15:56.123

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.

and I'm gonna lose the anchor and whatnot – iLemming Jul 25 '11 at 21:08 — iLemming, Jul 25 '11 at 21:08

Phil · Answer 2 · 2011-07-25T20:34:24.900

1

Yay, found it to work! Example :jsfiddle

var text = $('.outer').text();
$('.outer').text('').append($('<input>').val(text));

edited Jul 25 '11 at 20:34

answered Jul 25 '11 at 20:28

Phil

10,948
17
69
101

`this` in this context is not `.outer`, you're missing a `)` and if you fix those problems this will be equivalent to the original code. – James Montagne Jul 25 '11 at 20:35
30 seconds before I posted according to the timestamps, caching issue I guess. – James Montagne Jul 25 '11 at 20:37

score 1 · Answer 3 · answered Jul 25 '11 at 20:36

1

wow... that was an interesting excursion...

$(".outer")[0].lastChild.textContent = "blah";

http://jsfiddle.net/9uQtJ/

answered Jul 25 '11 at 20:36

Joseph Marikle

76,418
17
112
129

score 1 · Answer 4 · edited May 23 '17 at 12:29

1

The problem is your last JavaScript statement. You replace all content of <div class="outer">…</div> with an empty string. The previous inserted input element is just removed.

You need to select only the text child nodes of <div class="outer">…</div> to remove "Some Title". Take a look at this question for how to do this: How do I select text nodes with jQuery?.

edited May 23 '17 at 12:29

Community

1
1

answered Jul 25 '11 at 20:43

knut

4,699
4
33
43

score 0 · Answer 5 · answered Jul 25 '11 at 20:28

0

Try something like this:

http://jsfiddle.net/maniator/vsLac/

var text = $.trim($('.outer').text());
$('.outer').append($('<input>', {value: text}));

answered Jul 25 '11 at 20:28

Naftali

144,921
39
244
303

He doesn't want the text there anymore – Phil Jul 25 '11 at 20:32
@Phil -- and what about the link and the image? – Naftali Jul 25 '11 at 20:34

replace text with input

5 Answers5