cloneNode practice Exercise in JS
<!DOCTYPE html>
<html lang="en" id="hello">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Page</title>
<link rel="stylesheet" href="latesttest.css">
</head>
<body>
<div id="outer">
<h1 id="selector"> RUSTIC TRAVEL JUNKIE</h1>
<p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsam blanditiis voluptatibus et, cumque expedita, quam ea! Dolorem obcaecati, fuga, culpa neque, repellat laudantium libero sed sint veritatis praesentium vitae cumque ratione eveniet optio, aspernatur ab.</p>
<button id="inner">CLICK ME</button>
</div>
<div id="newOuter"><h2>Lorem ipsum dolor sit amet.</h2></div> <script>
document.getElementById('inner').addEventListener("click", box);
function box(){
var target= document.getElementById('outer').children[1];
var newVar= target.cloneNode(true);
document.getElementById('newOuter').appendChild(newVar);
}
</script>
</div>
</body>
</html>
<html lang="en" id="hello">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Page</title>
<link rel="stylesheet" href="latesttest.css">
</head>
<body>
<div id="outer">
<h1 id="selector"> RUSTIC TRAVEL JUNKIE</h1>
<p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsam blanditiis voluptatibus et, cumque expedita, quam ea! Dolorem obcaecati, fuga, culpa neque, repellat laudantium libero sed sint veritatis praesentium vitae cumque ratione eveniet optio, aspernatur ab.</p>
<button id="inner">CLICK ME</button>
</div>
<div id="newOuter"><h2>Lorem ipsum dolor sit amet.</h2></div> <script>
document.getElementById('inner').addEventListener("click", box);
function box(){
var target= document.getElementById('outer').children[1];
var newVar= target.cloneNode(true);
document.getElementById('newOuter').appendChild(newVar);
}
</script>
</div>
</body>
</html>
Comments
Post a Comment
I WOULD APPRECIATE IF YOU LEAVE A COMMENT OR YOUR FEEDBACK HERE !!!