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! 

と何も最後の2つのコード

おかげで#elementFirstで起こりました事前に応答するため

Answer 1

$()はではなく、jQuery objectで包まれたDOM elementを返します。 jQueryの関数は、jQuery objectsとのみ使用できます。

2番目のケースでは、innerHTMLプロパティを使用します。これはjQueryのオブジェクトには存在しません。

3番目のケースでは、関数を使用します。これはjQuery関数ですが、HTMLElementで使用しています。

例を参照してください。

あなたはinnerHTMLプロパティがDOM elementにjQuery objectと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>

Answer 2

var elHTML = '<div>Hello</div>'; 
var el = $('#elementFirst'); //jQuery code 
el.get(0).innerHTML = elHTML; 

基本的にあなたがあなたがのdocument.getElementById（それらを混在させることはできませんJavaScriptの