These examples show how we can use jOOX alongside ItsNat.
Most of jOOX works fine, but unfortunately CSS selectors usually fail because in jOOX CSS selectors are converted to XPath under the hood and we need a namespaced use of XPath not the case of jOOX, anyway some CSS selectors works just adding ":". See pure XPath examples to understand why ":" prefix is needed.
Remember everything happens in server, and in server all DOM nodes are created because itsnat:nocache=true is declared in the html root element (no node cached).
This example shows how we can navigate to the required node using a CSS selector and insert new markup. This is the code for insertion:
$(doc).find(":ul#someULId").children() // li items .eq(2) // li item 2 .children() // content of li .eq(0) // span .append(htmlCode);
The : before ul is needed because jOOX uses XPath under the hood and is required by ItsNat (see XPath examples).
Before insertion we clear the previously inserted markup with:
$(doc).find(":ul#someULId").children() // li items .eq(2) // li item 2 .children() // content of li .eq(0) // span .children().remove();
This is the ul element with id someULId (to understand what is happening, see the source code of the page):
jOOX provides some direct methods to get nodes by using XPath expressions. When XPath is accordingly configured in ItsNat we can use ":" to specify tag names, this is not the case of jOOX (a fork would be needed) in spite it works for some CSS selectors. We just can use the verbose version "*[name()='div']".