CODEWITHSUNDEEP
javascript
strix25
strix25

Reputation: 583

How to make part of inner HTML bold when creating new element - Vanilla JS

I want to make part of inner HTML bold when creating new tag, like this:

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);

Output of this is : Movie Potato is great

Now my question is, can I make something like this without using innerHTML?

I already tried this with createTextNode() but this function transforms everything to text including html so I got result: Movie <"b">Potato<"/b"> is great

Upvotes: 3

Views: 3197

Answers (1)

user2949702
user2949702

Reputation:

This answer does not use the innerHTML property and treats the variable movieTitle as plain text.

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>

Upvotes: 2

Related Questions