如何获取jQuery字符串中的标记以显示在HTML中

Question

When I want to add an element inside of another element, for example, a <span> inside of a <p> using jquery, the tags just appear as a string. I made a fiddle as an example:

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

You should use html() instead of text()

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

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