Jquery "before"添加按钮的关闭标记

Question

>我有以下HTML元素：-

<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">

我尝试在函数之前使用 jQuery 在span之前添加一个按钮(将span放在按钮之间)：

<script>
$(document).ready(function() {
$("a.more-link").before("<button class="btn btn-default">");
}); 
</script>   

输出为：

<button class="btn btn-default"></button>
<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">
<span aria-label="Continue reading post 2">(more…)</span>
</a>

以下</button>标签会自动添加！为什么？我可以不添加按钮标签之间的span吗？我如何防止这种情况，或者有什么方法可以在按钮标签之间添加跨度？

$(document).ready(function() {
$("a.more-link").before("<button class="btn btn-default">");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-default"></button>
<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">
<span aria-label="Continue reading post 2">(more…)</span>
</a>

Answer 1

如果不关闭不是有效 HTML 的标签，就无法打开标签，因此浏览器将始终通过添加关闭标签来验证您的 HTML 代码。

如果你想通过按钮包装你的span，你可以使用jQuery方法将其添加到你的js中，wrap()：

$( "a.more-link" ).wrap("<button class='btn btn-default'>");

注意：如果您这样做，您的 HTML 无效，因为您不应该在button标签内放置锚a。

(请查看嵌套<a>在<button>中不起作用 在 Firefox 中)。

希望这有帮助。

$( "a.more-link" ).wrap("<button class='btn btn-default'/>");
console.log ( $('button')[0].outerHTML );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">My link </a>

Answer 2

$(document).ready(function(){
$( "a.more-link" ).before( "<button class="btn btn-default"><span>I'm a span</span></button>" );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://localhost/wordpress/post-2/#more-4" class="more-link">

Answer 3

> Zakaria 是对的，你不能在不关闭标签的情况下打开它，将跨度包装在按钮内，使用这个

$( "a.more-link span" ).wrap("<button class='btn btn-default'>");

Answer 4

使用 jquery wrap 函数。

<script>
$(document).ready(function(){
$( "a.more-link" ).wrap( "<button class="btn btn-default">" );
}); 
</script>   

Answer 5

我不确定您到底需要什么，但请尝试wrap函数是否是您正在寻找的：

$( "a.more-link" ).wrap( "<button class="btn btn-default">" )