Can not get innerHTML from a jQuery Object

Question

I am using google map api. I wrote the code below. ```

``` And I use the google chrome console to see the content of `$("div#map")`. ``` console.log($("div#map")); ``` The result is: ``` [

…

] ``` How can I get the innerHTML : ```

…

``` I tried `$("div#map > div")`, but there is nothing returned. Why? Is it because the innerHTML generated by Javascript? How can I get it and insert another div into the div above? Thank you very much.

Accepted Answer

To get a plain javascript dom object from a valid jquery selector, use `get(0)` or `[0]`.

```
$("#map")[0]//note that as id's are unique, you do not need to have anything else
            //in here to target them
```

Once you have the plain DOM object, you can use `innerHTML`

```
$("#map")[0].innerHTML
```

Although an easier way, since you are already using jQuery, would be to use jQuery's version of innerHTML `html`.

```
$("#map").html()
```

As for your second question, you can insert a div into the div like this:

```
var newDiv = document.createElement("div");
newDiv.innerHTML = "simple text, probably want to make more elements and set attributes and build them using .appendChild().";
$("#map")[0].appendChild(newDiv);
```

Or like this for the parent of map:

```
$("#map")[0].parentNode.appendChild(newDiv);
```

Can not get innerHTML from a jQuery Object

Solution

Problem