如何在另一个元素之后添加一个元素？

Posted 2023-03-11

【中文标题】如何在另一个元素之后添加一个元素？

【英文标题】：How can I add an element after another element?

【发布时间】：2011-01-15 17:18:13

【问题描述】：

我有一个特定的文本框，我想在它之后添加一个 div。 我已经尝试过.append() 函数，但这只会在元素中添加 div。

例如，我有：

<input type="text" id="bla" />

我想把它改成：

<input type="text" id="bla" /><div id="space"></div>

【参考方案1】：

尝试使用after() 方法：

$('#bla').after('<div id="space"></div>');

Documentation

【讨论】：

.after() 和 .insertAfter() 方法执行相同的任务。

没错，但这取决于您喜欢的编码方式。我通常已经选择了“#bla”输入，然后再添加额外的内容。不过，这纯粹是我的偏好，我不确定这两种方法是否具有速度优势。

【参考方案2】：

试试

.insertAfter()

这里

$(content).insertAfter('#bla');

【讨论】：

你的代码不应该更像$('<div id="space"></div>').insertAfter('#bla')而不是$('#bla').insertAfter(content);吗？

【参考方案3】：

首先，input 元素不应该有结束标签（来自http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT：结束标签：禁止 ）。

第二件事，你需要after()，而不是append() 函数。

【讨论】：

正确，但是当我尝试 .append() 函数时会发生这种情况。

如果是 XHTML，那么输入元素应该被关闭（但不带有结束标签）。

在 HTML4 中 <input> 不应关闭。

【参考方案4】：

解决 jQuery：在另一个元素之后添加元素

<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>

或

<script type="text/javascript"> 
jQuery(document).ready(function()
jQuery ( ".sidebar_cart" ) .append( "<a href='http://#'>Continue Shopping</a>" );
);
</script>

【讨论】：

这是不正确的。这会将元素附加到父元素中，就像 OP 所述。考虑再次阅读问题并修改您的答案。