document.writeinnerHTMLdocument.createElement(tagName)
document.createElement("p")
Creates a documentFragment.
document.createTextNode(text)
document.createTextNode("this is my text")
createElementcreateTextNodesetAttributeBut how do you put them together?
parentElement.appendChild(childNode)
var para = document.createElement("p");
var text = document.createTextNode("this is my text");
para.setAttribute("title","my title");
para.appendChild(text);
This is still a documentFragment.
<p title="my title">this is my text</p>
var mydiv = document.getElementById("content");
var para = document.createElement("p");
var text = document.createTextNode("this is my text");
para.setAttribute("title","my title");
para.appendChild(text);
mydiv.appendChild(para);
The documentFragment has been added to the document:
<body>
<div id="content">
<p title="my title">this is my text</p>
</div>
</body>
parentElement.insertBefore(newElement,targetElement)
Remember, you can always figure out the parent element:
targetElement.parentNode
var mydiv = document.getElementById("content");
var para = document.createElement("p");
var text = document.createTextNode("this is my text");
para.setAttribute("title","my title");
para.appendChild(text);
var container = mydiv.parentNode;
container.insertBefore(para,mydiv);
The documentFragment has been added to the document:
<body>
<p title="my title">this is my text</p>
<div id="content">
</div>
</body>
<ul id="imagegallery">
<li><a href="images/andy.jpg">Andy</a></li>
<li><a href="images/ian.jpg">Ian</a></li>
<li><a href="images/doug.jpg">Doug</a></li>
</ul>
<img src="images/placeholder.jpg" alt="my gallery"
id="placeholder" />
There is no insertAfter!
Write your own:
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
createElementcreateTextNodesetAttributeappendChildinsertBefore