javascript - 为什么我不能在 JS 和 jQuery 中使用同一个变量？

Question

为什么我不能在 JS 和 jQuery 中使用同一个变量？例如:

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

如果我像这样更改一些代码..

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

或者这个

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

在最后两个代码中 #elementFirst 没有任何反应

感谢您提前回答

Answer 1

因为$() 返回的不是HTMLElement，而是用jQuery 对象 包裹的DOM 元素。jQuery 的函数只能与 jQuery 对象 一起使用。

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

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

查看示例。

可以看到jQuery对象中没有innerHTML属性，DOM元素中没有html函数。

var jEl = $('#elementFirst');
console.log('innerHTML' in jEl);

var domEl = document.getElementById('elementFirst');
console.log('html' in domEl);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='elementFirst'></div>