How to update the DOM in Blazor WebAssembly using JavaScript

Key takeaways:

  • JavaScript is essential for certain tasks like DOM manipulation and using specific web APIs.

  • To interact with JavaScript from .NET, the IJSRuntime service is utilized, which requires injecting it into your Blazor component using dependency injection.

    • Use InvokeVoidAsync method to call JavaScript functions that do not return a value.

    • Use InvokeAsync method for JavaScript functions that return a value, with both methods being asynchronous.

  • Demonstrating button interactions shows how to change text color and retrieve text from HTML elements using JavaScript interop.

Blazor WebAssembly will allow you to build fully functional applications without the need to work directly with JavaScript. However, JavaScript may become an essential ingredient in some situations, as specific tasks cannot be achieved without it. The absence of JavaScript means you won’t be able to manipulate the DOM or utilize the JavaScript APIs crucial for web development.

How to access the DOM

To execute a JavaScript function from .NET, we utilize the IJSRuntime abstraction. This abstraction represents a JavaScript runtime that the framework can access. To utilize IJSRuntime, we must first inject it into our component using dependency injection.

The IJSRuntime abstraction uses below methods to invoke JavaScript functions:

  • InvokeVoidAsync: Invoke JavaScript function and does not return any value.
  • InvokeAsync: Invoke JavaScript function and return value.

Both methods are asynchronous in nature.

InvokeVoidAsync(string func_name, params object[] args);

  • func_name: Name of JavaScript function that is being called.

  • args (optional): Array of arguments used by the function. 

ValueTask<TValue> InvokeAsync<TValue>(string func_name, params object[] args);
  • func_name: Name of JavaScript function that is being called.
  • args (optional) : array of arguments used by the function.
  • TValue: This is the type of return value.

Steps to update the DOM in Blazor WebAssembly

  1. Create a JavaScript file in the root directory folder called wwwroot. This file contains the script.

  2. Link your script file with index.html file using the <script> tag. in the body element.

    Note: You can see these files in the code below in the wwwroot folder.

  3. Inject IJSRuntime service in component.

  4. Create an event handler to call InvokeAsync or InvokeVoidAsync on a specific event, like a click event.

  5. Pass the JavaScript function as an argument to IJSRuntime methods.

Code example to update the DOM in Blazor WebAssembly

In the below example, we create two buttons, one to call InvokeVoidAsync and the other to call InvokeAsync method when they are clicked.

The first button toggles the text color and appends the color name by calling the InvokeVoidAsync method because we do not need to return anything.

Second button extracts the text from the h1 element by calling the InvokeAsync method and returns the value to the variable innertext:

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.5" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.5" PrivateAssets="all" />
  </ItemGroup>

</Project>
Demo App

Explanation

  • Line 2: Inject the IJSRuntime service.

  • Line 18: Call the InvokeVoidAsync and pass the logic.Toggle_Color function as string.

  • Line 22: Call the InvokeAsync and pass the logic.getText function as string.

Note: You can see JavaScript file in wwwroot folder.

Join our course on Building Real-Life Applications with Blazor WebAssembly to explore Blazor and its web development capabilities. You’ll learn to create templated components, develop progressive web applications, harness JavaScript interoperability, etc. Elevate your skills and start building today!

Frequently asked questions

Haven’t found what you were looking for? Contact Us

How can we replace a DOM element using JavaScript?

We can use replaceWith() method to replace a DOM element using JavaScript.

oldElement.replaceWith(newElement);

How can we get next DOM element in JavaScript?

We can get next DOM element in JavaScript using Element.nextElementSibling property.

How can we remove current DOM element in JavaScript?

We can remove current DOM element in JavaScript using Element.remove() method.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved