如何使用 javascript 将附加文本加粗？

Question

正在开发一个项目，我想让附加文本显示为粗体。根据我的研究，它应该是 .bold() 但这并没有使我附加的文本变成粗体，而是显示我的文本被“< b >< /b >”包围。我做错了什么？这是我的代码：

var breweryname=response.results[i].name;
    var breweryName = $("<p class='title'>").text(response.results[i].name.bold());
    breweryDiv.append(breweryName);

Answer 1

我建议不要使用

.html()

，因为它可能会注射（您应该避免）。

.name

只是一个文本

name

您想要它

bold

然后继续使用

.text

。

将 css （粗体字体） 应用于动态添加的元素 (response.results[i].name).

您可以简单地使用 jQuery .css 函数，它可以让您像普通 css 一样设计元素，这是一种更好的方法。

运行下面的代码片段以查看其工作原理。

//Div to append to
var breweryDiv = $('#breweryDiv')

//Response
var breName = 'Random Name' //response.results[i].name;

//Text
var breweryName = $("<p class='title'>").text(breName);

//Apply Css
$(breweryName).css({
  'font-weight': 'bold'
})

//Append Results
breweryDiv.append(breweryName);

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

</div>

Answer 2

不要使用

.text()

，而是使用

.html()

（确保您信任响应 - 您不需要任何注入！）如果您想分开，您还可以使用

title

来创建 CSS 类

font-weight: bold

行为和表现。