javascript - 创建新元素时如何使内部 HTML 的一部分变为粗体 - Vanilla JS

Question

我想在创建新标签时将内部 HTML 的一部分设为粗体，如下所示:

var movieTitle = "Potato";
var words = "Movie " + movieTitle.bold() + "is great";

var list = document.getElementById("ulList");
var newLI = document.createElement('li');

newLI.innerHTML = words;
list.appendChild(newLI);

输出是:电影土 bean 很棒

现在我的问题是，我可以在不使用 innerHTML 的情况下制作这样的东西吗？

我已经用 createTextNode() 尝试过这个，但是这个函数将所有内容转换为文本，包括 html，所以我得到了结果:电影 <"b">Potato<"/b"> 很棒

Answer 1

此答案不使用 innerHTML 属性并将变量 movieTitle 视为纯文本。

let movieTitle = "Potato"
let listItemElement = document.createElement("li")
listItemElement.textContent = "The movie "
let movieTitleElement = document.createElement("b")
movieTitleElement.textContent = movieTitle
listItemElement.appendChild(movieTitleElement)
listItemElement.appendChild(document.createTextNode(" is great"))
document.getElementById("ulList").appendChild(listItemElement)

<ul id="ulList"></ul>