Question

如何在jQuery中直接在锚标记后添加按钮？例如，我的HTML看起来像：

<div style="border-style: solid; border-width: thin; padding: 2px;">
  <center>
    <a target="_blank" href="http://www.mydomain.com/">MyDomain.com</a>
    <b>My Hypertext Link</b>
    <br/>
    Options:
   <a class="theAClass" href="#">Insert button after this anchor</a>
  </center>
</div>

我想在锚点（class =“theAClass”）之后但在“center”标签之前添加一个按钮，以便按钮在页面上居中。

Answer 1

$('.theAClass').after('<button>...</button>')

应该做的伎俩。这会在标签后附加你指定的html。

Answer 2

//Add button after every theAclass link
$('a.theAClass').after('<button type="button">Click Me!</button>');

//Add button after only the first theAclass link
$('a.theAClass:first').after('<button type="button">Click Me!</button>');

Answer 3

这也是一种替代方法，但是生成这样的元素可能会慢得多。但是当处理具有许多属性的元素时，它可以更整洁。

$('<button />')
    .html('Click me')
    .insertAfter('.theAClass:first');

Answer 4

您可以使用after()：

执行此操作

$("a.theAClass").after("<input type='button' value='Do Stuff'>");

或insertAfter()：

$("<input type='button' value='Do Stuff'>").insertAfter("a.theAClass");

第二种方法的好处是你可以这样做：

$("<input></input>").attr("type", "button").attr("value", "Do Stuff")
  .insertAfter("a.theAClass");

或更简单：

$("<input></input>").attr({type: "button", value: "Do Stuff"})
  .insertAfter("a.theAClass");

这可能是有利的，因为以这种方式构造标记将正确地转义特殊字符等等，而第一种方式需要手动转义内容，这对于包含动态元素非常重要。

jQuery在锚点后插入一个按钮

4 个答案: