ボタンの値をHTMLコンテンツとして設定する

Question

ボタンの値を変更してHTMLコードとして解釈するにはどうすればよいですか？

<input type="button" value="Click"> 

それを押すと、私はこれを行う：私はこれを持っているコンテンツは、回転スピナーではありませんが

$(this).prop('disabled', true); 
$(this).prop('value', '<i class="fa fa-spinner"></i>'); 

。これをどうすれば解決できますか？

Answer 1

<input type="button">要素内にHTMLを配置することはできません。あなたはhtml()の代わりprop()とともに、これを達成するために<button>を使用する必要があるだろう：

$('button').click(function() { 
 
    $(this).prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>'); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button">Click</button>

注アイコンを回転させるfa-spinクラスの追加。

Answer 2

入力フィールドにHTMLを設定することはできません。

$("input").click(function(e){ 
    $(this).prop('disabled', true).css("display", "none"); 
    $wrapper = $("<div >"); 
    $(this).wrap($wrapper); 
    $(this).after('<i class="fa fa-spinner"></i>'); 
}) 

JSFiddle：https://jsfiddle.net/uswcfjef/