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/

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

Answer 2

哇...这是一次有趣的短途旅行......

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

http://jsfiddle.net/9uQtJ/

Answer 3

问题是您最后的JavaScript声明。使用空字符串替换<div class="outer">…</div>的所有内容。刚刚删除了之前插入的输入元素。

您只需选择<div class="outer">…</div>的文本子节点即可删除“Some Title”。请看一下这个问题：How do I select text nodes with jQuery?。

Answer 4

是的，发现它起作用了！示例：jsfiddle

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

Answer 5

尝试这样的事情：

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

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

用输入替换文本

5 个答案: