Scribd
Upload
6 views4 pages

HTML Document with JavaScript Examples

The document is an HTML file that demonstrates various JavaScript functionalities such as manipulating elements by ID, class, and tag name, as well as using event listeners and cloning nodes. It includes examples of changing inner HTML, setting attributes, and modifying styles. Additionally, it showcases creating and appending new elements to the DOM.

Uploaded by

rajkumarrkz9528
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views4 pages

HTML Document with JavaScript Examples

The document is an HTML file that demonstrates various JavaScript functionalities such as manipulating elements by ID, class, and tag name, as well as using event listeners and cloning nodes. It includes examples of changing inner HTML, setting attributes, and modifying styles. Additionally, it showcases creating and appending new elements to the DOM.

Uploaded by

rajkumarrkz9528
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<!-- id -->

<p id="demo">kmit</p>

<!-- class -->

<p class="one">welcome</p>

<p class="one">Bye</p>

<p class="one">cse</p>

<button onclick="hello();">click me</button>

<!-- tagname -->

<h2>harry</h2>

<!-- id with setAttribute -->

<img src="./[Link]" id="my">

<!-- eventlistener -->

<button id="myButton">click me to change</button>

<!-- queryselector -->

<div id="myDIV">

<p>hello</p>
<h3>World</h3>

<h1>bye</h1>

</div>

<!-- clone -->

<ul id="menu">

<li>Home</li>

<li>Services</li>

<li>About</li>

<li>Contact</li>

</ul>

<script>

//id

[Link]('demo').innerHTML="helloworld";

//classname

function hello(){

var xyz= [Link]('one');

xyz[2].innerHTML="hyd";

//tag name

var abc=[Link]('h2');

if([Link]>0)

abc[0].innerHTML="potter";

else{
[Link]("no element found")

//queryselector

[Link]('my').setAttribute('src','./[Link]')

//eventlistener

[Link]('myButton').addEventListener('click', function() {

// Change the background color of the button

[Link] = 'red';

});

// Create element:

const para = [Link]("p");

[Link] = "This is a paragraph.";

// Append to body:

[Link](para);

//queryselector

[Link]("#myDIV").childNodes[5].[Link] = "yellow";

//clone

let menu = [Link]('#menu');

let clonedMenu = [Link](true);

[Link](clonedMenu);
</script>

</body>

</html>

You might also like