如何獲取jQuery字符串中的標籤以顯示在html中

Question

當我想要使用jquery在<p>的內部添加另一個元素內的元素，例如<span>時，標籤只會顯示爲一個字符串。我做了一個fiddle爲例：

HTML：

<button> 
Click Me 
</button> 

<p> 
This will have a red thing right here: ___. 
</p> 

CSS：

span { 
    color: red; 
    font-weight: bold; 
} 

p { 
    color: blue; 
    font-weight: bold; 
} 

button { 
    border: 2px solid blue; 
    background-color: rgba(0, 0, 0, 0); 
    padding: 10px; 
    font-size: 15px; 
    cursor: pointer; 
    transition-duration: 0.3s; 
} 
button:hover { 
    background-color: rgba(0, 0, 255, 0.3); 
    color: white; 
} 

button:active { 
    background-color: rgba(0, 0, 255, 0.6); 

} 

JS：

$(document).ready(function(){ 

$('button').click(function(){ 

$('p').text("This will have a red thing right here: <span> The red thing! </span>") 

}); 

}); 

Answer 1

您應該使用html()代替text()

$('p').html("This will have a red thing right here: <span> The red thing! </span>") 

https://jsfiddle.net/IA7medd/4cpno334/1/

Answer 2

只要改變的.text（）爲.html（）

$('p').html("This will have a red thing right here: <span> The red thing! </span>")