Adding row in the middle of 2 div class in SharePoint page

Question

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

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

Answer 1

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

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension

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.

Answer 2

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.....