如何将 document.getElementById(id) 元素转换为 jquery object？

Question

I'm actually surprised this question is not asked before:

I generate elements with:

document.getElementById(id).innerHTML = (some string with id's in it);

for example.

And I want to use jQuery (to update the CSS of the children of elements).

As those elements are created dynamically a simple:

$("#id") 

doesn't work.

(It returns n.fn.init[0] objects).

How do I get a jQuery object from a HTML DOM object?

Answer 1

If you are using innerHTML to generate DOM elements you might need to access the from parent children and then initialize the jQuery array on it (with $)

const container=document.getElementById(id);

container.innerHTML = '<div>...</div>'
$(container.children)

Answer 2

You simply do this:

$(document.getElementById(id))

you can use it as a jquery object:

$(document.getElementById(id)).children().css("opacity", "" + opacityTotal);

Answer 3

You can update the css of the dynamically added children in the document simply as:

$(document).find(".classOfYourDynamicallyAddedChildrens").css({"color":"red"});