Can not get innerHTML from a jQuery Object

Question

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

<div id="map"></div>

And I use the google chrome console to see the content of $("div#map").

console.log($("div#map"));

The result is:

[
<div id="map" style="width: 1218.222222328186px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0); ">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; ">…</div>
</div>
]

How can I get the innerHTML :

<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0; ">…</div>

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.

$() returns an array with search results, even if there is only 1 element that matches. That is why the answers tell you to use $("#map")[0] — tomdemuyt
– tomdemuyt, Commented Nov 23, 2012 at 19:19

Travis J · Accepted Answer · 2012-11-23 19:16:42Z

6

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);

answered Nov 23, 2012 at 19:16

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1836330 Over a year ago

Thank you very much for your reply.But there are nothing returned when using $("#map").html(). And I want to get the inner HTML $("#map")[0].child.child innerHTML. How can I get it?

Travis J Over a year ago

@user1836330 - If there is nothing inside of $("#map").html() then it is possible the page or element is not loaded yet. If you want to get the innerHTML of a child of $("#map") then use jQuery find. $("#map").find()

user1836330 Over a year ago

I tried many times and changed the place of the code . But the result is still "". What I want to do is to add a custom control to google.maps.drawing.DrawingManager. I cant find a way to do this. Thank you very much!

user1836330 Over a year ago

when I refresh the page. The first time, the result of console.log($("div#map")[0]); is <div id="map" style="width: 1218.222222328186px; "></div> and then if I refresh again, the result becomes HTMLDivElement.

Travis J Over a year ago

@user1836330 - Try surrounding your jquery in $(function(){ /* code here */ });

Nathan Wall · Accepted Answer · 2012-11-23 19:15:55Z

0

Use the html() method to get the html from a jQuery object.

console.log($("div#map").html());

http://api.jquery.com/html/

edited Nov 23, 2012 at 19:15

answered Nov 23, 2012 at 19:10

Nathan Wall

10.8k4 gold badges29 silver badges48 bronze badges

3 Comments

user1836330 Over a year ago

I tried console.log($("div#map").html()); But there are nothing returned.

jfriend00 Over a year ago

@user1836330 - if you tried console.log($("div#map").html()); and there was nothing, then perhaps you are calling it too soon before the map has been populated or you have an error that is keeping it from being executed.

user1836330 Over a year ago

I tried many times and changed the place of the code . But the result is still "". What I want to do is to add a custom control to google.maps.drawing.DrawingManager. I cant find a way to do this. Thank you very much!

Collectives™ on Stack Overflow

Can not get innerHTML from a jQuery Object

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related