Difference between revisions of "Traversing the DOM"

From rbachwiki
Jump to navigation Jump to search
Line 7: Line 7:
== Creating and Inserting Elements==
== Creating and Inserting Elements==
<pre>
<pre>
 
var p = document.createElement('P');
p.textContent = "A new Paragraph";
p.style.fontSize = '17px';
var li= document.querySelector('li');
li.appendChild(p);
</pre>
HTML
<pre>
<body>
<h1>Outwter</h1>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</body>
</pre>
</pre>

Revision as of 17:59, 25 October 2016

Selecting Elements with the query selector

document.querySelector('h1');
document.querySelector('.classname'); // will return the 1st item with that class name
document.querySelectorAll('.classname'); // will return a array with all items with that class name
document.querySelector('#idname');

Creating and Inserting Elements

var p = document.createElement('P');
p.textContent = "A new Paragraph";
p.style.fontSize = '17px';
var li= document.querySelector('li');
li.appendChild(p);

HTML

<body>
<h1>Outwter</h1>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</body>