<div class="container">
  <p>This is just for a test.</p>
</div>

<section id="section">
  <p data-myPara="true">I am test.</p>
  <a href="https://learncodeweb.com" target="_blanck">Learning Website</a>
</section>

<form>
  <input type="text" name="user" id="user" placeholder="Write your name here" value="Zaid Bin Khalid">
  <input type="password" name="user" id="user" placeholder="Write your password">
  <input type="text" name="user" id="user" placeholder="Write your name here" value="Zaid Bin Khalid">
  
  <br>
  <a href="https://learncodeweb.com" target="_blanck">Forgot Password?</a>
</form>
.link{
  color:red;
}
$(document).ready(function () {
  console.log($('.container').html());
  $('.container').append('<p>I am appended paragraph.</p>');
  $('.container').css('background-color','#FF0');
  console.log($('.container').html());
  
  
  $('a').attr('class','link');
  
  $('[type="text"]').val('My Value');
  
  var myPara  = $('[data-myPara]').text();
  console.log(myPara);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js