奇怪的JavaScript/JQuery的行为创建一个div元素

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 

为什么是冠军只是[对象HTMLDivElement]而不是一个合适的对象？为什么我不能设置课程？ MenuPaneToBe是一个设置为显示块的自定义标记。

<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