moringaman
3/15/2017 - 11:28 PM

Basic Dom Manipulation

Basic Dom Manipulation

manipulateFom.js
content_copyfile_download
document.querySelector('#easy').style.backgroundColor = "red";
document.querySelector('.container').style.backgroundColor = "blue";
document.querySelector('a').style.backgroundColor = "green";
document.querySelectorAll('a')[3].style.backgroundColor = "green";
document.querySelectorAll('a')[1].text = "Hello";

var p = document.createElement('p');

p.textContent = "This is a new paragraph";
p.style.fontSize = '16px';

li = document.querySelector('li');
a = li.firstElementChild;

li.insertBefore(p, a);

var a3 = document.querySelectorAll('a')[2];

a3.parentElement.removeChild(a3);
index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <h1 id="easy"> Welcome to my page</h1>
    <h1>visitor</h1>
  </div>
  
  <ul>
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
  </ul>
<script id="jsbin-javascript">
document.querySelector('#easy').style.backgroundColor = "red";
document.querySelector('.container').style.backgroundColor = "blue";
document.querySelector('a').style.backgroundColor = "green";
document.querySelectorAll('a')[3].style.backgroundColor = "green";
document.querySelectorAll('a')[1].text = "Hello";

var p = document.createElement('p');

p.textContent = "This is a new paragraph";
p.style.fontSize = '16px';

li = document.querySelector('li');
a = li.firstElementChild;

li.insertBefore(p, a);

var a3 = document.querySelectorAll('a')[2];

a3.parentElement.removeChild(a3);
</script>



<script id="jsbin-source-javascript" type="text/javascript">document.querySelector('#easy').style.backgroundColor = "red";
document.querySelector('.container').style.backgroundColor = "blue";
document.querySelector('a').style.backgroundColor = "green";
document.querySelectorAll('a')[3].style.backgroundColor = "green";
document.querySelectorAll('a')[1].text = "Hello";

var p = document.createElement('p');

p.textContent = "This is a new paragraph";
p.style.fontSize = '16px';

li = document.querySelector('li');
a = li.firstElementChild;

li.insertBefore(p, a);

var a3 = document.querySelectorAll('a')[2];

a3.parentElement.removeChild(a3);</script></body>
</html>