I have a chat-like Blazor application that I need to continuously add DOM elements to:

<EditForm model="this" OnValidSubmit="@Query">
    <div id="qrContainer">
        <div>
            <input type="text" @ref="queryElement" @bind="query" />
        </div>
        <div>
            <div id="output" @bind="response"></div>
        </div>
    </div>
</EditForm>
@code {
    private String query { get; set; } = null;
    private String response { get; set; }
    private ElementReference queryElement;

    private async Task Query(){
        // ...
            var responseString = await responseService.getResponseAsync(query);
            // Need to add DOM element to "output" here.
        // ...
    }
}

From what I understand, JSInterop is not the preferred way to do this. So, how do I add new DOM elements the “Blazor” way?