jQueryの私は、HTML要素を以下しているボタン

Question

の終了タグを追加する "前に"： -

<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コードを検証します。

ボタンによって、あなたのスパンをラップしたい場合は、jQueryのメソッドwrap()を使用して、あなたのJSでそれを追加することができます。

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

注：あなたがそうするならばは、あなたのHTMLは、以来、有効ではありませんbuttonタグの内側にアンカーaを置くべきではありません。

（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'>");