使用javascript在表单文本字段旁边插入一个html链接答案

【问题标题】：Insert a html link next to form text field using javascript使用javascript在表单文本字段旁边插入一个html链接
【发布时间】：2012-11-05 17:34:10
【问题描述】：

我有一个包含名字和姓氏的表格..

可以通过单击“添加更多”链接来克隆/复制它们。

这是代码..

<form>
    <p class="clone">
    First name: <input type="text" name="fname[]" value=""><br>
Last name: <input type="text" name="lname[]" value=""><br>
    </p>
   </form>
<a href="#" class="add" rel=".clone">Add More</a>

这是 jsfiddle 演示 http://jsfiddle.net/d6mYr/

现在我想在姓氏文本表单字段旁边插入此链接。

<a href="#">Example</a>

目前我的表单在表单字段中没有类属性。它只有名称属性。

那么任何人都可以帮助我使用 jquery 自动添加该链接吗？

【问题讨论】：

标签： javascript jquery forms

【解决方案1】：

不使用那个 relCopy 插件

$(function() {
    var exampleLink = $('<a href="#">Example</a>')
    exampleLink.insertAfter('input[name="lname\[\]"]')

    $('a.add').click(function() {
        var removeLink = $('<a href="#" />').text('Remove').click(function() {
            $(this).parent().slideUp(function() {
                $(this).remove();
            })
        });

        var new_row = $('.clone:first').clone();
        new_row.append(removeLink)
        new_row.appendTo($(this).prev());
    });
});

http://jsfiddle.net/d6mYr/3/

【讨论】：

优秀.. 但我也希望在默认字段中使用该链接。在您的小提琴中，它仅出现在克隆字段中。你能修好它吗？谢谢
还有一件事，到目前为止，它出现在字段集之外。但我只需要在姓氏旁边..
你想在用户点击添加后将其添加到默认字段吗？
它实际上在 DOM 中的姓氏字段旁边
我不小心粘贴了应该是这个jsfiddle.net/d6mYr/3的链接

【解决方案2】：

您似乎已经在添加链接，但它位于“名字”下方。尝试在输入姓氏后删除BR 标签：

<form>
    <p class="clone">
    First name: <input type="text" name="fname[]" value=""><br>
    Last name: <input type="text" name="lname[]" value="">
    </p>
</form>
<a href="#" class="add" rel=".clone">Add More</a>

【讨论】：

【解决方案3】：

您可以在 relCopy 函数调用之前添加以下内容：

  var exampleLink = '<a href="#">Example</a>';
  $('input[name="lname[]"]').last().after(exampleLink);

【讨论】：