///insertBefore///
<html>
<head>
<title>Hacking JavaScript</title>
</head>
<body>
<h1>Hello world!</h1>
<p>I am a JavaScript hacker!</p>
</body>
</html>
var x = document.getElementsByTagName('h1')[0];
var y = document.getElementsByTagName('p')[0];
x.parentNode.insertBefore(y,x); ///removeChild///
var x = document.getElementById('testID');
x.parentNode.removeChild(x);
///nodeValue///
<p>I am a JavaScript hacker.</p>
var par = [the paragraph];
var text = par.firstChild.nodeValue;
///nodeName///
var evt = e || window.event;
var evtTarget = evt.target || evt.srcElement;
if (!(
(evtTarget.nodeName == 'SELECT' && e.type == 'change')
||
(evtTarget.nodeName == 'INPUT' && evtTarget.getAttribute('rel'))
)) return;
// valid click, show/hide form fields
///nodeType///
| Element type | nodeType |
|---|---|
| Element | 1 |
| Attribute | 2 |
| Text | 3 |
| Comment | 8 |
| Document | 9 |
var evt = e || window.event;
var evtTarget = evt.target || evt.srcElement;
if (evtTarget.nodeType == 3)
evtTarget = evtTarget.parentNode; <html>
<head>
<title>Hacking JavaScript</title>
</head>
<body>
<h1>Hello world!</h1>
<p>I am a JavaScript hacker!</p>
<p>And that's bloody marvellous</p>
</body>
</html>
var x = document.getElementsByTagName('h1')[0];
x.parentNode.appendChild(x);
var y = x.firstChild; var z = document.getElementsByTagName('p')[1]; z.appendChild(y); Removing all child nodes
while (x.childNodes[0])
x.removeChild(x.childNodes[0]);
createElement() and createTextNode()
var x = document.createElement('p');
var y = document.createTextNode('This is a created element');
x.appendChild(y);
document.body.appendChild(x);
createTextNode() and HTML entities
var x = document.createTextNode('© Copyrights reserved');
document.getElementById('test').appendChild(x);
parentNode, firstChild, lastChild, previousSibling, nextSibling
createTextNode() cannot create HTML entities.
Use innerHTML instead:
document.getElementById('test').innerHTML = '© Copyrights reserved'
parentNode, firstChild, lastChild, previousSibling, nextSibling
///cloneNode()///
var x = document.getElementsByTagName('h1')[0];
var y = x.cloneNode(true);
document.body.appendChild(y);
parentNode, firstChild, lastChild, previousSibling, nextSibling var trashLink = document.createElement('a');
trashLink.href = '#';
trashLink.innerHTML = 'trash ';
trashLink.className = 'trash';
var orderLink = document.createElement('a');
orderLink.href = '#';
orderLink.innerHTML = 'order ';
orderLink.className = 'order';
//
var extraLink = trashLink.cloneNode(true);
extraLink.onclick = removeSandwich;
var extraLink2 = orderLink.cloneNode(true);
extraLink2.onclick = moveToOrderTable;
searchField.parentNode.appendChild(extraLink2);
searchField.parentNode.appendChild(extraLink);