在 JavaScript 列中添加粗体

Question

我尝试只为部分字符串添加粗体。 但是，当我使用该 getElementByID 并将粗体标签作为字符串放入 FE 时，它会将其返回给我

[对象 HTMLSpanElement]

var boldSign = document.getElementById('boldSign');
boldSign.innerHTML = "<b>(+)</b>";
return {
  column: {name: boldSign+ " All other products"},
  addFilter: function () {
    vm.displayAll(!vm.displayAll())
  }
}

<tr data-bind="foreach: $parent.columns, css: {highlighted: highlighted}">
  <td data-bind=" click: $parent.addFilter">
    <span style='white-space: pre-wrap;' id="boldSign" data-bind="text: $parent[propertyName] ? ($parent[propertyName].value ? $parent[propertyName].value : $parent[propertyName]) : ''"></span>
    <!-- ko if: $parent[propertyName] && $parent[propertyName].value -->
    <div data-bind="css: { 'positive-growth': $parent[propertyName].isPositive, 'negative-growth': !$parent[propertyName].isPositive }"></div>
    <!-- /ko -->
  </td>
</tr>

Answer 1

问题：你不能+一个HTML元素和一个字符串

您看到[object HTMLSpanElement] All other products 的原因是因为您将HTMLSpanElement 添加到string。这是一个取消等式的复制：

const mySpan = document.getElementById("mySpan");
const myString = " All other products";

console.log(
  mySpan + myString
);

<span id="mySpan">( + )</span>

Javascript 不会抱怨，但结果可能不是你想要的！

使用innerHTML 是有意义的，就像您已经使用的那样：

const mySpan = document.getElementById("mySpan");
const myString = " All other products";

mySpan.innerHTML = `<b>${mySpan.innerHTML}</b> ${myString}`;

<span id="mySpan">( + )</span>

使用淘汰赛

在使用敲除时，除非您处于自定义绑定中（这已经非常高级），否则您永远不应该在文档中查询 HTML 元素。

相反，您可以使用（以及其他）if、with 或 visible 绑定来创建动态模板。

这是一个简化的例子：

ko.applyBindings({
  rows: [
    { hasPlusSign: true, label: "Show all products" },
    { hasPlusSign: false, label: "Some product" }
  ]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach: rows">
  <div>
    <span data-bind="if: hasPlusSign"><b>( + )</b></span>
    <span data-bind="text: label"></span>
  </div>
</div>

html 绑定

如果您在使用敲除（这种情况非常罕见）时需要将 HTML 字符串注入到文档中，则必须使用 html 绑定而不是 text 绑定。

除非您绝对 100% 确定您注入的 HTML 字符串是安全的，否则您永远不应使用 html 绑定。