jquery - 用输入替换文本

Question

我有这样的标记:

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

现在，我需要用包含当前标题的文本框替换文本(某些标题)。我已经尝试过了:

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

它放置一个带有空字符串的文本框。我尝试将文本存储在临时变量中，尝试克隆整个外部 div，然后获取文本，并清空原始 div 中的文本。无论如何，无论我做什么，清除文本后，输入值也变空。

Answer 1

只需将文本存储在变量中，然后在附加输入之前清除 div。

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

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

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

根据评论更新(保留图像等):

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/

注意:可能有更好的方法来获取正确的文本节点，但这似乎可行。