Difference between revisions of "Traversing the DOM"
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>