无法从 jQuery 对象获取 innerHTML

Posted

技术标签:

【中文标题】无法从 jQuery 对象获取 innerHTML【英文标题】:Can not get innerHTML from a jQuery Object 【发布时间】:2012-11-12 03:29:15 【问题描述】:

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

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

而我使用谷歌浏览器控制台查看$("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 &gt; div"),但没有返回任何内容。 为什么?是不是因为javascript生成的innerHTML? 如何获取它并将另一个 div 插入到上面的 div 中?

非常感谢。

【问题讨论】:

$() 返回一个包含搜索结果的数组,即使只有 1 个元素匹配。这就是为什么答案告诉你使用 $("#map")[0] 【参考方案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的父级这样:

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

【讨论】:

非常感谢您的回复。但是使用$("#map").html()时没有任何返回。我想获得内部 HTML $("#map")[0].child.child innerHTML。我怎样才能得到它? @user1836330 - 如果$("#map").html() 内没有任何内容,则可能尚未加载页面或元素。如果你想获得$("#map") 的子元素的innerHTML,那么使用jQuery find。 $("#map").find() 我试了很多次,改了代码的地方。但结果仍然是“”。我想要做的是向 google.maps.drawing.DrawingManager 添加一个自定义控件。我找不到办法做到这一点。非常感谢! 当我刷新页面时。第一次,console.log($("div#map")[0]); 的结果是 ​​ 然后如果我再次刷新,结果变成 HTMLDivElement. @user1836330 - 尝试在 $(function() /* code here */ ); 中包围你的 jquery;【参考方案2】:

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

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

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

【讨论】:

我试过 console.log($("div#map").html());但是没有返回任何东西。 @user1836330 - 如果您尝试console.log($("div#map").html()); 并且没有任何结果,那么您可能在地图被填充之前调用它太早,或者您有一个错误导致它无法执行。 我试了很多次,改了代码的地方。但结果仍然是“”。我想要做的是向 google.maps.drawing.DrawingManager 添加一个自定义控件。我找不到办法做到这一点。非常感谢!

以上是关于无法从 jQuery 对象获取 innerHTML的主要内容,如果未能解决你的问题,请参考以下文章

锋利的jQuery读书随笔

无法从 innerHTML 获取动态数据 - Angular

jQuery对象与DOM对象的相互转化

未捕获的 DOMException:无法使用 JQuery 设置“innerHTML”属性

jQuery 文件上传。无法读取 null 的属性“innerHTML”

jQuery随堂笔记