Alternative to innerHTML in SharePoint Framework web parts

When you create a new project without any framework, the default web part content in the code will be added through innerHTML.
Technically there is nothing wrong with this approach, but you might run into a problem when you add more content to the web part afterward using the same method. In this case, the previously added content will be overwritten.

To avoid this behavior, you can use jQuery and the ‘append‘ or ‘prepend‘ methods to add your content. It works well but requires an external library.
Instead of using jQuery, there is a native method in the document object model of HTML available.

insertAdjacentHTML – Method

This method exists on any HTML element and allows to prepend and append HTML code to an existing element. Plus this method provides some nice options too. The base call of this method looks like this.

1

this.domElement.insertAdjacentHTML(<where>,<html content>);

The second option is the HTML content. You simply need to add your new content as a string there. The function also makes sure that all HTML elements are properly closed and the content will be validated.
The more compelling argument of this function is the ‘<where>’. There are four valid options available.

‘beforebegin’:
You can add the content before the web part content starts. It’s not recommended because to content is outside of the web part scope.
In jQuery this option equivalent to prepend.‘afterbegin’:
Adds your content right after the opening div element of your web part. So it is similar to innerHTML but won’t replace existing content.‘beforeend’:
Adds your content right before the closing div tag of your web part. Again similar to innerHTML but without replacing the existing content.‘afterend’:
Content will be added directly after the closing div tag that defines the web part content.
In jQuery this option equivalent to append.

While jQuery only provides you different function for append and prepend content. Besides, you need to walk the DOM Tree of your HTML up and down to achieve the same result.
From my point of view, this native HTML DOM method is more robust than the actual implementation of jQuery.

Practice test to add content

Let’s do a little practice test and combine all four options in a single web part.

Usage of insertAdjacentHTM

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

publicrender():void{

// local shotcut to dom elemenet

let webPartDom=this.domElement;

// Demonstrate the inner web part border

webPartDom.style.border='1px black solid';

webPartDom.style.padding='1em';

webPartDom.style.boxSizing='border-box';

// Insert before the web part begins

webPartDom.insertAdjacentHTML(

'beforebegin',

`<div class='` + styles['beforebegin-webpart'] + `'>

Before Web part begins`

);

// Insert right after the web part begins

webPartDom.insertAdjacentHTML(

'afterbegin',

`<div class='` + styles['afterbegin-webpart'] + `'>

Right at the top of the web part`

);

// Insert right after the web part begins

webPartDom.insertAdjacentHTML(

'beforeend',

`<div class='` + styles['beforeend-webpart'] + `'>

At the top of the web part`

);

// Insert right after the web part begins

webPartDom.insertAdjacentHTML(

'afterend',

`<div class='` + styles['afterend-webpart'] + `'>

After the web part ends`

);

}

Now the content passed to the method will be added to the web part and create the following resulting web part.

insertAdjacentHTML – practice test

When you add now additional items to the web part it allows to add the content for example after of before the closing container of your web part.
The same method even works on all child elements inside your web part.

Personal thoughts on jQuery

In the last two years, I observed my usage pattern of jQuery. Beside AJAX, DOM manipulations and event bindings I haven’t used much of all the more advanced jQuery stuff.
Nowadays I tend more to use plain HTML DOM with JavaScript/Typescript or one of the fancy JavaScript Frameworks. To me, jQuery has become less important these days.
Personally, I think jQuery had its time when there was a big gap between the JavaScript implementations in different browsers.
Even more additional libraries formerly based on jQuery nowadays exist as a Vanilla JS Version.
This method shown here is supported by IE6 and newer browser.