javascript - 如何让jquery字符串中的标 checkout 现在html中

Question

当我想在另一个元素中添加一个元素时，例如 <span>在 <p> 里面使用 jquery，标签只是显示为一个字符串。我做了一个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/