javascript - 创建 div 元素时奇怪的 Javascript/JQuery 行为

Question

    menuPaneToBe.title = document.createElement("div");
    $(menuPaneToBe).append(menuPaneToBe.title);
    console.log(1)
    console.log(menuPaneToBe.title)
    $(menuPaneToBe.title).addClass("menuTitle");
    console.log(2)
    $(menuPaneToBe.title).html("Title"); //Just placeholders, gets changed by circular-view
    console.log(3)

控制台

1 MenuPane.js:12
[object HTMLDivElement] MenuPane.js:13
Uncaught Error: Syntax error, unrecognized expression: [object HTMLDivElement] jquery-1.11.0.min.js:2

为什么标题只是 [object HTMLDivElement] 而不是一个合适的对象？为什么我不能设置类(class)？ MenuPaneToBe 是一个自定义标签，设置为显示 block 。

<menu-pane id="menu"></menu-pane>

menu-pane {
    display: block;
    height: 100%;
    width: 30%;
    border-left: 1px solid black;
}

Answer 1

这是一个奇怪的问题，如果 menuPaneToBe 指的是一个 dom 元素(不是 jQuery 对象)，那么 title 属性将指该元素的 title 属性，它是一个字符串值。至少在 Google Chrome 中，当您为元素的标题赋值时，它会将其转换为字符串对象。

因此，当您说 menuPaneToBe.title = document.createElement("div") 时，它会将字符串值 [object HTMLDivElement] 分配给 menuPaneToBe.title ，这是一个无效的 jQuery 选择器。

然后当您输入 $(menuPaneToBe.title) 时，它会抛出上述错误。

演示:Fiddle

只需将属性名称从 title 更改为其他名称，例如 title2

var menuPaneToBe = $('#menu')[0];
menuPaneToBe.title2 = document.createElement("div");
$(menuPaneToBe).append(menuPaneToBe.title2);
console.log(1)
console.log(menuPaneToBe.title2)
$(menuPaneToBe.title2).addClass("menuTitle");
console.log(2)
$(menuPaneToBe.title2).html("Title"); //Just placeholders, gets changed by circular-view
console.log(3)

演示:Fiddle