No jQuery

el = $('#foo');

el = document.getElementById('foo');

el = $('.foo');

el = document.querySelector('.foo');

els = $('.foo');

els = document.querySelectorAll('.foo');

$(parent).append(el);

parent.innerHTML += el;

findEl = parent.find('div');

findEl = parent.querySelectorAll('div');

parent = el.parent();

parent = el.parentNode;

opacity = el.css('opacity');

opacity = el.style.opacity;

el.css('background-position');

el.style.backgroundPosition; //-> camelcase if css prop has hyphen

el.css('opacity',1);

el.style.opacity = 1;

el.hide();

el.style.display = 'none';

el.show();

el.style.display = 'block';

el.attr('style');

el.getAttribute('style');

el.removeAttr('style');

el.removeAttribute('style');

els.each(function(i){ var that = $(this); });

els.forEach((that,i)=>{ });

els.addClass('bar');

els.forEach((el,i)=>{
	el.classList.add('bar');
});

els.removeClass('bar');

els.forEach((el,i)=>{
	el.classList.remove('bar');
});

els.toggleClass('bar');

els.forEach((el,i)=>{
	el.classList.toggle('bar');
});

el.html('data');

el.innerHTML = 'data';

el.replaceWith('<p>Lorem ipsum.</p>');

el.outerHTML = '<p>Lorem ipsum.</p>';

//-> need to retain javascript tag usage when setting html?
el.html("<p>Lorem ipsum.</p><script>console.log('foo');</script>");

el.innerHTML = "<p>Lorem ipsum.</p><script>console.log('foo');</script>";
Array.from(el.querySelectorAll("script")).forEach(old => {

var newScript = document.createElement("script");
newScript.appendChild(document.createTextNode(oldScript.innerHTML));
oldScript.parentNode.replaceChild(newScript, oldScript);

});

$.ajax({
	type: 'post',
	url: '/foo/bar',
	data: 'queryVar=fooBar',
	success:function(d){
		el.html(d);
	}
});

var xhr = new XMLHttpRequest();
xhr.open('post','/foo/bar',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send('queryVar=fooBar');
xhr.onreadystatechange = function(){
	el.innerHTML = xhr.responseText;
};

$('form').serialize();

var data = new FormData(document.querySelector('form'))
new URLSearchParams(data).toString();

el.position().left;

el.getBoundingClientRect().left;

el.position().top;

el.getBoundingClientRect().top;

el.offset().left;

el.getBoundingClientRect().left + window.scrollX;

el.offset().top;

el.getBoundingClientRect().top + window.scrollY;

$(window).height();

window.innerHeight;

$(window).width();

window.innerWidth;

el.outerHeight(false);

el.offsetHeight; //-> doesn't include margins

el.outerWidth(false);

el.offsetWidth; //-> doesn't include margins

el.click(function(e){  });

el.addEventListener('click',(e)=>{ });

el.trigger('click',event);

el.dispatchEvent('click',event);

el.unbind('click');

//-> click event must be declared first
var clickEvent = function(e){ e.preventDefault(); }
//-> then applied
el.addEventListener('click',clickEvent);
//-> then you can remove it
el.removeEventListener('click',clickEvent);

el.remove();

el.remove();

el.keyup(function(){
	var thatVal = $(this).val();
});

el.addEventListener('keyup',(e)=>{
	var thatVal = document.getElementById(e.target.id).value;
});

$(document).ready(function(){ });

window.addEventListener('load',function(){ }, false);

$(window).scroll(function(){ });

window.onscroll = function(){}

var scrollTop = $(window).scrollTop();

var scrollTop = window.pageYOffset;

el.text('string');

el.textContent = 'string';

el.val();

el.value;

$("div:contains('search')");

document.querySelectorAll('div').forEach((el) =>
	el.textContent.includes('search');
);