Page layout section messed up by using javascript with innerHTML

NKS

Hi everyone

A simple macro kills the page layout when sections are used.

The macro:

---

## @noparams

<div id="ToBeFilled"></div>

<script>
var dicontent = 'Lorem';
document.getElementById("ToBeFilled").innerHTML = dicontent;
</script>

---

The layout of the page in the edit mode:

And the layout of the page after clicking on "Update":

 

If there are none or only one section, everything works fine. If there are two or more, all sections after the macro are messed up. The section with the macro is displayed on the left, the rest on the right.

I don't understand why this happens like this and therefore I don't know how to solve it. I think there is a problem with the "innerHTML", but I don't know what exactly and how to avoid it.

Is anyone out there who could help me?

Thanks a lot and best regards

nks

Jordan Hauser

This is just a test page right? Can you go to the advanced options ellipses at the top right of the published page and click 'View Page Storage Format'

I recently had a project where I was setting up pages from code and api requests and learned about macros a bit more. That kind of function is what happens when you use the page layout options OR use a section macro and put two column macros in it from what I understand. The regular page layout appears to be just a GUI friendly way to show the macros, as using the section and column macros nested looks pretty messy in the editor.

The storage format for the page would be helpful to figure it out
-Jordan