Javascript 为什么我不能在JS和jQuery中使用相同的变量？

为什么我不能在JS和jQuery中使用相同的变量？ 例如：

var elHTML = '<div></div>';
var el = document.getElementById('elementFirst'); //js code
el.innerHTML = elHTML; //js code
//it works!

var elHTML=''；
var el=document.getElementById（'elementFirst'）//js代码
el.innerHTML=elHTML//js代码
//它起作用了！

如果我像这样修改一些代码

var elHTML = '<div></div>';
var el = $('#elementFirst'); //jQuery code
el.innerHTML = elHTML; //js code
//not work!

var elHTML=''；
var el=$（“#elementFirst”）//jQuery代码
el.innerHTML=elHTML//js代码
//不行！

还是这个

var elHTML = '<div></div>';
var el = document.getElementById('elementFirst'); //js code
el.html(elHTML); //jQuery code
//not work!

var elHTML=''；
var el=document.getElementById（'elementFirst'）//js代码
html（elHTML）//jQuery代码
//不行！

在最后两个代码中，

#elementFirst

没有发生任何问题

感谢您提前回答

，因为

$（）

返回的不是

HTMLElement

，而是用

jQuery对象

包装的

DOM元素

。 jQuery的函数只能用于

jQuery对象

在第二种情况下，使用jQuery对象中不存在的

innerHTML

属性

在第三种情况下，您使用了

html（）

函数，这是一个jQuery函数，但您已经将它与

HTMLElement

一起使用

参见示例。

您可以看到

jQuery对象中不存在
innerHTML
属性，而
DOM元素中不存在
html
函数


var-jEl=$（'elementFirst'）；
log（'innerHTML'在jEl中）；
var domEl=document.getElementById（'elementFirst'）；
console.log（domEl中的“html”）

因为
$（）
返回的不是
HTMLElement
，而是用
jQuery对象
包装的
DOM元素。
jQuery的函数只能用于
jQuery对象

在第二种情况下，使用jQuery对象中不存在的
innerHTML
属性

在第三种情况下，您使用了
html（）
函数，这是一个jQuery函数，但您已经将它与
HTMLElement
一起使用

参见示例。

您可以看到
jQuery对象中不存在
innerHTML
属性，而
DOM元素中不存在
html
函数


var-jEl=$（'elementFirst'）；
log（'innerHTML'在jEl中）；
var domEl=document.getElementById（'elementFirst'）；
console.log（domEl中的“html”）

var elHTML='Hello'；
var el=$（“#elementFirst”）//jQuery代码
el.get（0.innerHTML=elHTML；

基本上，您可以使用.get（0）将jQuery转换为普通的JavaScript
var-elHTML='Hello'；
var el=$（“#elementFirst”）//jQuery代码
el.get（0.innerHTML=elHTML；

基本上，您可以使用.get（0）将jQuery转换为普通JavaScript，但不能将它们与文档混合使用。getElementById（）返回HTML元素，$（）返回jQuery对象。结构和关联的方法是不同的。不能将它们与文档混合使用。getElementById（）返回HTML元素，$（）返回jQuery对象。结构和相关方法各不相同。
var elHTML = '<div>Hello</div>';
var el = $('#elementFirst'); //jQuery code
el.get(0).innerHTML = elHTML;