I am trying to add a heading tag using javascript in a html document along with trying to swap 2 images , I want this heading tag at the top of the page .(I am new to js so there might be some mistakes in the code) This is the html page code.
<html>
<head>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<img src="1123013.jpg" id="left" >
<img src="1189318.png" id="right" >
<form>
<input type="email" id="email" value="manuojha1@gmail.com">
<br>
<input type="password" id="password" value="password">
<br>
<button id="reset">Reset</button>
</form>
<script src="script1.js"></script>
</body>
This is the javascript code I have written so far, I cannot find a way to insert the heading tag at the top of the page.
let heading=document.createElement("h1");
heading.textContent="This is the sample heading";
body.append(heading);
heading.textContent="this is inserted heading";
body.append(heading);
let img1=document.getElementById("left");
let img2=document.getElementById("right");
console.log(img1,img2);
let swap=function(){
let temp=img1.src;
img1.src=img2.src;
img2.src=temp;
};
img1.addEventListener("click",function(){
console.log("image 1 clicked");
swap();
});
img2.addEventListener("click",function(){
console.log("image 2 clicked");
swap();
});
console.log(img2.src);
let input=document.getElementsByTagName("input");
let reset=document.getElementById("reset");
reset.addEventListener("click",function(){
input[0].defaultValue="default@123";
input[1].defaultValue="def";
console.log("reset button clicked");
});```
let html = `<h1 class="heading">Heading</h1>`;
let update = document.querySelector('body');
if(update){
update.append(html);
}