jquery - 如何使用 Jquery 在锚标记内附加输入？

Question

请帮忙，我得到了带有跨度的锚标签，使用Jquery我如何在不丢失跨度并使用实际值的情况下追加输入！？？

我懂了

<a class='fieldEditable' href='#'><span class='blue'>Id. Usuario</span> **Juan David**</a>

我想使用值 Juan David 作为输入的值

<a class='fieldEditable' href='#'><span class='blue'>Id. Usuario</span><input type="text" name="newid" value="**Juan David**"> </a>

span class='blue' 在某些情况下不一样我的意思是它会改变

我试过了

$('a.fieldEditable').append('<input type="text" name="newid" value="">');

结果

<a class='fieldEditable' href='#'><span class='blue'>Id. Usuario</span> **Juan David**<input type="text" name="newid" value="**HOW MOVE THE VALUE JUAN DAVID TO HERE??**"></a>

快完成了，我需要一些帮助！

Answer 1

定位 textNodes 有点困难，但这里有一种方法：

$(".fieldEditable")
    .contents()
    .filter(textNodes)
    .each(function(index, object){
        $("<input>", { 
            type: "text", 
            value: object.textContent.trim() 
        }).replaceAll(this).before(" ");
    });

function textNodes () {
    return this.nodeType === 3 && this.textContent.trim().length;
}​

<a class='fieldEditable' href='#'>
    <span class='blue'>Id. Usuario</span> 
    Juan David
</a>​

结果如下：

<a class="fieldEditable" href="#">
    <span class="blue">Id. Usuario</span> 
    <input type="text" value="Juan David">
</a>

演示：http: //jsfiddle.net/TxvYE/

Answer 2

您可以更改标记：

<a class='fieldEditable' href='#'><span class='blue'>Id. Usuario</span><span id='target'>**Juan David**</span></a>

和js：

$('a.fieldEditable').append('<input type="text" name="newid" value="">');
$('input[name=newid]').val($('#target').text());

Answer 3

尝试这个：

var v=$('a.fieldEditable').html();
var newHTML=v+'<input type="text" name="newid" value="">';
$('a.fieldEditable').html(newHTML);

Answer 4

使用容器

<a class='fieldEditable' href='#'><span class='blue'>Id. Usuario</span><span id='target'>**Juan David**</span></a>

然后它很容易更换：

var target = $('#target');
target.replaceWith($('<input/>').val(target.text())

Answer 5

无需更改您的标记 - 并使用 javascript 正则表达式，您可以使用：

var inner = $('.fieldEditable').html();
var re = /(<span.*<\/span>) ([\s\S]+)/i;
var m = re.exec(inner);
if(m != null && m.length == 3) {
    var span = m[1];
    var person = m[2]
    $('.fieldEditable').html(span + '<input type="text" name="newid" value="' + person + '">')
}