Question

我正在使用谷歌地图API。我写了下面的代码。

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

我使用Google Chrome控制台查看$("div#map")的内容。

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

结果是：

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

我如何获得innerHTML：

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

我试过了$("div#map > div")，但没有回复。为什么？是因为Javascript生成的innerHTML？我怎样才能得到它并在上面的div中插入另一个div？

非常感谢。

Answer 1

要从有效的jquery选择器中获取普通的javascript dom对象，请使用get(0)或[0]。

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

获得普通DOM对象后，可以使用innerHTML

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

虽然更简单，但由于您已经在使用jQuery，因此将使用jQuery版本的innerHTML html。

$("#map").html()

至于你的第二个问题，你可以像这样在div中插入一个div：

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

或者像地图之父这样：

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

Answer 2

使用html()方法从jQuery对象获取html。

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

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

无法从jQuery对象获取innerHTML

2 个答案: