Difference between revisions of "Traversing the DOM"
Jump to navigation
Jump to search
Line 6: | Line 6: | ||
== Creating and Inserting Elements== | == Creating and Inserting Elements== | ||
This will append the text after the first li | |||
<pre> | <pre> | ||
var p = document.createElement('P'); | var p = document.createElement('P'); | ||
Line 13: | Line 14: | ||
li.appendChild(p); | li.appendChild(p); | ||
</pre> | </pre> | ||
This will append the text after the second li | |||
<pre> | |||
var p = document.createElement('P'); | |||
p.textContent = "A new Paragraph"; | |||
p.style.fontSize = '17px'; | |||
var li= document.querySelectorAll('li')[1]; | |||
li.appendChild(p); | |||
</pre> | |||
HTML | HTML | ||
<pre> | <pre> |
Revision as of 18:44, 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
This will append the text after the first li
var p = document.createElement('P'); p.textContent = "A new Paragraph"; p.style.fontSize = '17px'; var li= document.querySelector('li'); li.appendChild(p);
This will append the text after the second li
var p = document.createElement('P'); p.textContent = "A new Paragraph"; p.style.fontSize = '17px'; var li= document.querySelectorAll('li')[1]; 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>