jQuery的 「前」 添加按鈕

Question

的結束標記我有以下HTML元素： -

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

我想添加一個按鈕span（把span按鈕之間）之前使用jQuery函數之前：

<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代碼。

如果你想通過按鈕來包裝你的跨度，你可以在使用jQuery方法wrap()您的js添加：

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

注：如果你這樣做你的HTML是無效的，因爲你不應該把一個a錨定在button標籤中。

（請看看Nesting <a> inside <button> doesn't work in 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

使用jQuery wrap功能。

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

Answer 3

$(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 4

我不知道你到底需要，但嘗試，如果wrap功能是你在找什麼：

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

Answer 5

扎卡里亞是正確的，你可以打開一個標籤而不關閉它，將這個標籤包裹在按鈕內，使用這個

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