How can I add new row in the middle of two div elements (.commandBarWrapper .ms-CommandBar) and (bottomNavRow-46)?

enter image description here

Is there anyway i can add this without using or installing anything.

  • 1
    DOM manipulations in SP modern pages are not recommended by Microsoft. How are you trying to add custom HTML in pages, using any SPFx web part or extension? Aug 2, 2022 at 8:53

2 Answers 2


You can use SPFX Extension -> Application Customize to inject your element into Modern Page.


Important: It's not suggested approach by Microsoft to inject any element in Page (except special area provided by SPFX Extension i.e. Header area and Footer area) because, Class name of the element which you use to identify location can be changed anytime by Microsoft.

  • thank you but i am not able to install spfx because of restriction Aug 3, 2022 at 0:34

There is no recommended straightforward way of doing this

What you can do is : Create an SPFX extension and in the onInit function copy the following code

public onInit(): Promise<void> {
 let newDiv = document.createElement("div");
 let div = document.getElementByClassName("commandBarWrapper");
 this.insertAfter(div, newDiv);

public insertAfter(newNode, referenceNode) {
 referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

Now the div is added below the commandBarWrapper div.

Hope this will solve your problem, if so please mark this as the answer.

Thank you.....

  • thank you it didnt work for me Aug 3, 2022 at 0:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.