What is the professionally accepted way to manipulate the DOM with Blazor? Is it JSInterop or some other Blazor method?

All I am trying to accomplish is to dynamically add a new DIV to my UI.

I have seen some posts that scoff at the use of JSInterop because Blazor is supposed to "hide" JavaScript to make coding "easier"; an example of that is here:

Blazor dynamically createElement and appendChild

However, many of the replies for a Google search like this one:

https://www.google.com/search?q=how+to+add+a+new+div+to+an+existing+div+microsoft+blazor+application

Say to use JSInterop.

With JavaScript, which is I assume JSInterop provides, all that is needed is this:

const MAIN_DIV = document.getElementById('main_div');let newDiv = document.createElement('div');MAIN_DIV.appendChild(newDiv);

From what I understand, Blazor was invented to eliminate the need for knowing JavaScript so .NET developers can code in a .NET way. It seems to me, however, that it makes things more difficult.

So, again, what is the professionally accepted way to manipulate the DOM with Blazor?