是否可以在 innerHtmlin JavaScript 中设置部分文本的样式？

Question

我想在将段落附加到 html 页面之前设置段落的某些部分的样式。我尝试了一些方法，但它们不起作用。请参阅注释语法。我想给单词 Description 设置样式，正确的做法是什么？谢谢。

const detailsDiv = document.getElementById("details");
var articleDecs = document.createElement("p");
articleDecs.setAttribute("class", "productDesc");
var str = "Description:  ";
//var str2 = str.bold();
//var str3 = "<b>Description:  </b>" ;
articleDecs.innerText = "Description: " +catalogArray[pos].desc;

//articleDecs.innerText = str2  +catalogArray[pos].desc;
//articleDecs.innerText = str3 "+catalogArray[pos].desc;
console.log(articleDecs);
detailsDiv.appendChild(articleDecs);

<div id="details"></div>

Answer 1

如果您正确连接并使用 innerHTML，它就可以工作

const catalogArray = [{
  desc: "Desc 1"
}]

let pos = 0

const detailsDiv = document.getElementById("details");
var articleDecs = document.createElement("p");
articleDecs.setAttribute("class", "productDesc");
var str1 = "Description:  ".bold();
articleDecs.innerHTML = str1 + catalogArray[pos].desc;
console.log(articleDecs);
detailsDiv.appendChild(articleDecs);

<div id="details"></div>

但为什么不使用 CSS 而不是 .bold()

const catalogArray = [{
  desc: "Desc 1"
}]

let pos = 0

const detailsDiv = document.getElementById("details");
var articleDecs = document.createElement("span");
articleDecs.setAttribute("class", "productDesc");
articleDecs.innerText = "Description:  ";
detailsDiv.appendChild(articleDecs);
detailsDiv.appendChild(document.createTextNode(catalogArray[pos].desc));

.productDesc { font-weight:bold }

<div id="details"></div>

Answer 2

如果你想用 js 做样式，就这样：

var catalogArray = [{
    desc: "Desc 1"
}]

var pos = 0;

const detailsDiv = document.getElementById("details");
var articleDecs = document.createElement("p");
articleDecs.setAttribute("class", "productDesc");
articleDecs.innerHTML = "Description:" + catalogArray[pos].desc;
articleDecs.style.fontWeight = "bold";
detailsDiv.appendChild(articleDecs);

<div id="details"></div>

是否可以在 innerHtmlin JavaScript 中设置部分文本的样式？

Is it possible to style some part of text in innerHtmlin JavaScript?

html

javascript

css

innerhtml