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-25 21:15:56Z

4

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.

edited Jul 25, 2011 at 21:15

answered Jul 25, 2011 at 20:32

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

iLemming Over a year ago

and I'm gonna lose the anchor and whatnot

Phil · Accepted Answer · 2011-07-25 20:34:24Z

1

Yay, found it to work! Example :jsfiddle

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

edited Jul 25, 2011 at 20:34

answered Jul 25, 2011 at 20:28

Phil

11.2k18 gold badges73 silver badges106 bronze badges

2 Comments

James Montagne Over a year ago

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 Over a year ago

30 seconds before I posted according to the timestamps, caching issue I guess.

Joseph Marikle · Accepted Answer · 2011-07-25 20:36:10Z

1

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

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

http://jsfiddle.net/9uQtJ/

answered Jul 25, 2011 at 20:36

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:29:44Z

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, 2017 at 12:29

CommunityBot

11 silver badge

answered Jul 25, 2011 at 20:43

knut

4,7474 gold badges36 silver badges43 bronze badges

Comments

Naftali · Accepted Answer · 2011-07-25 20:28:42Z

0

Try something like this:

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

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

answered Jul 25, 2011 at 20:28

Naftali

147k41 gold badges247 silver badges304 bronze badges

2 Comments

Phil Over a year ago

He doesn't want the text there anymore

Naftali Over a year ago

@Phil -- and what about the link and the image?

Collectives™ on Stack Overflow

replace text with input

5 Answers 5

1 Comment

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related