How to dynamically generate OJET components using document.createElement

Question

Is there a way to dynamically generate ojet components using document.createElement()? e.g.

var ss = document.createElement('oj-select-single');
ss.setAttribute("data","[[arrayData]]");
div.appendChild(ss)

I have tried setting attributes but the component does not show on UI. However there is a node created on the DOM. I think there is some problem with the ko bindings. But this method doesn't work for any ojet component.

Answer 1

Because you are updating the DOM, you have to apply knockout binding again. Adding ko.applyBindings(this, ss); after your code should fix your issue. Take a look at the working example here