在跨度内创建fontawesome图标

Question

所以我想将fontawesome图标附加到我刚刚作为var制作的范围内。 假设我要使用这个“” 我在哪里以及如何使用它？谢谢

    var mySpan = $("<span />", {
        "text": "Spanned",
        "class": "myclass"
    });
    
    $("button").click(function(){
    mySpan.appendTo("div");
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button>Click to Append</button>
<div>

</div>

Answer 1

尝试：

var mySpan = $('<span class="myClass"><i class="fa fa-search"></i>Spanned</span>')

$("button").click(function(){
    mySpan.appendTo("div");
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button>Click to Append</button>
<div>

</div>

Answer 2

在<i>内插入span元素-您可以通过手工制作元素或在对象的html属性中插入来实现：

var mySpan = $('<span class="myClass">Spanned <i class="fa fa-angle-double-left"></i></span>')
$("button").click(function() {
  mySpan.appendTo("div");
})

<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<button>Click to Append</button>
<div></div>

var mySpan = $("<span />", {
  html: 'Spanned <i class="fa fa-angle-double-left"></i>',
  class: "myClass"
});
$("button").click(function() {
  mySpan.appendTo($("div"));
});

<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<button>Click to Append</button>
<div></div>

Answer 3

您可以尝试一下

var mySpan = $("<span />", {
  "text": "Spanned",
  "class": "myclass"
});

var myIcon = $("<i />", {
  "class": "fa fa-check"
}).prependTo(mySpan);

$("button").click(function() {
  mySpan.appendTo("div");
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button>Click to Append</button>
<div>

</div>