Using typescript, I try to insert some elements starting from an xml structure. The real xml is big and comes from backend but, to over-simplify, I try something like:
let xmlSource = '<divr><div>recA</div><div>recB</div></divr>';
let xml2 = $.parseXML(xmlSource);
$(`#${this.someTextBoxId}`).append([].slice.call(xml2.getElementsByTagName('divr')[0].childNodes));
As a result I have in the page only standard, recognizable ‘div’ elements. The thing is that I can not use css on those divs?! They are inserted one after another having, as I suspect
display: inline
but I need them to appear one under another, so I need ‘display: block’. As a matter fact, it seems no css works on them. Not only I can not do it programmatically, it also doesn’t work from console or from Chrome Developer Tools either. In the Developer Tools, for those, I even don’t see usual sections:
element.style{
}
div { user agent stylesheet
}
I highlight that this happens only for those div’s. For other elements, the css works just fine. As an experiment, if I try
$(`#${this.someTextBoxId}`).append(xmlSource);
it works, the css is available.
So I need a way to make css work in that situation or another method to import/insert xml. Maybe, first to convert it to string?!