document.getElementById('myElement');
document.querySelector('.myClass');

$('#myElement');
$('.myClass');

document.getElementById('btn').addEventListener('click', function() {
  console.log('Button clicked');
});

$('#btn').click(function() {
  console.log('Button clicked');
});

document.getElementById('myDiv').style.color = 'red';

$('#myDiv').css('color', 'red');

document.getElementById('myDiv').innerHTML = 'New content';

$('#myDiv').html('New content');

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

$.get('data.json', function(data) {
  console.log(data);
});

function changeContent() {
  var element = document.getElementById('content');
  element.style.color = 'blue';
  element.innerHTML = 'Content changed!';
  element.addEventListener('click', function() {
    alert('Element clicked!');
  });
}

function changeContent() {
  $('#content')
    .css('color', 'blue')
    .html('Content changed!')
    .click(function() {
      alert('Element clicked!');
    });
}