如何獲取jQuery字符串中的標記以顯示在HTML中

Question

當我想使用jquery在另一個元素內添加一個元素，例如<p>內的<span> ，標簽只是顯示為字符串。 我以小提琴為例：

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

只需將.text（）更改為.html（）

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

Answer 2

您應該使用html()而不是text()

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

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