How to add a standard element (e.g. button) to w2layout

I develop a JavaScript frontend using w2ui components.

I have a nested w2layout setup like the following

  let layout = new w2layout(outerConfig.layout);
  let grid = new w2grid(outerConfig.grid);
  let formLayout = new w2layout(innerConfig.layout);
  let form = new w2form(innerConfig.form);
  let btn = document.createElement ('button');
  btn.className = "w2ui-btn";
  btn.innerText = "test",
        
  layout.render('#outerdiv');
  layout.html('left', grid);
  layout.html('main', formLayout);
  formLayout.html('main', form);
  formLayout.html('bottom', btn);

In the ‘bottom’ a text is displayed instead of displaying the button itself:
[object HTMLButtonElement]

The same happens if I add a div instead of the button.

However if I add a w2grid object to the ‘bottom’ it is displayed fine. So the layout structure works fine.

(I do not want to use the actions property of the form as I want to dynamically add and remove buttons from the div placed in ‘bottom’)

How can I get w2layout to properly display non w2ui elements?

thank you.

>Solution :

Try changing…

formLayout.html('bottom', btn)

With:

formLayout.html('bottom', btn.getHTML())

The problem is probably happening because the formLayout.html() is using btn.toString()…