How do I add an i element instead of div element?

countesscat

I need to add a custom i element instead of div element. How do I achieve that? I followed the example here - https://datatables.net/examples/advanced_init/dom_toolbar.html but that adds a div element. I tried adding the i element inside the custom div but that does not work for me because I need to add :focus + i so when the parent div is selected to change the focus style of the i element, too. Been trying to select the i element inside the custom div with its parent to no avail. Suggestions welcome. My example is not publicly accessible, hence only the link to custom elements is provided but I need to know how to insert an i element. Thanks!

colin

Hi @countesscat ,

If dom isn't working for you, try adding directly like this. If that's not what you're after, please modify that link to demonstrate what you're after,

Cheers,

Colin

countesscat

Thanks for your reply! I am after adding a font awesome icon i element below the search input element because I have a special focus rules of the input where the i glows with the border and the background of the i. And I need to apply this to DataTables. Thanks for your suggestion. That really did add it but somehow my css select does not work. It is like
.parent.sub-parent input:focus + i
I tried also placing it in a div and changing the focus but that did not help much. Link updated.

colin

Hi @countesscat ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

countesscat

Odd. I added 3 css files form our app and a custom search, so that an example could be shown but I guess it did not save. I will try with prepend and append as you suggested. Regards!

countesscat

I got the problem. It is because the <label> tag. How do I remove the <label> but keep the <input> tag of the filter?

countesscat

Solved by insetting into the label $('div.dataTables_filter label').append('my things go here.')

Thank you very much, colin! Appreciated!