javascript - Kan inte få innerHTML från ett jQuery-objekt

Jag använder Google Maps API. Jag skrev koden nedan.

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

Och jag använder Google Chrome-konsolen för att se innehållet i $ ("div#map").

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

Resultatet är:

[
<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>
]

Hur kan jag få innerHTML :

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

Jag provade $ ("div#map > div"), men det returneras ingenting. Varför? Är det för att innerHTML genereras av Javascript? Hur kan jag få det och infoga en annan div i div:en ovan?

Tack så mycket.

Svar #1

För att få ett vanligt JavaScript DOM-objekt från en giltig jQuery-selector, använd get(0) eller [0].

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

När du har det vanliga DOM-objektet kan du använda innerHTML

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

Även om ett enklare sätt, eftersom du redan använder jQuery, skulle vara att använda jQuerys version av innerHTML html.

$("#map").html()

Vad gäller din andra fråga kan du infoga en div i div:en på detta sätt:

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

Eller så här för föräldern till kartan:

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

Svar #2

Använd html()-metoden för att hämta HTML från ett jQuery-objekt.

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

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