Append Insert Remove

Click a link to see the results     Append     Insert

Using append() will add to the end of the contents of the element while insertBefore() places before the element.
You can reference existing elements in the page or create new ones using the DOM

For the above example the 2 divs are coded into the page using html

<div id="div1">Div One</div>
<div id="div2">Div Two</div>

I then used the following to append div2 to div1

document.getElementById('div1').appendChild(document.getElementById('div2'))

and

document.body.insertBefore(document.getElementById('div2'),document.getElementById('div1'))

to insert div2 before div1

You can append or insert using the body as a reference

document.body.appendChild(document.getElementById('div2')) // place at the end of the body
document.body.insertBefore(document.getElementById('div2'),document.body.childNodes[0]) // place at the beginning of the body

You can also use document.getElementsByTagName('BODY').item(0) instead of document.body

element.appendChild(newElement)
element.insertBefore(newElement,beforeElement)
element.replaceChild(newElement,oldElement)

To create an element you assign your new element to a variable

newElement = document.createElement(tagName)

You can also assign appropriate attributes to the newly create element

newElement.setAttribute("name", "value")
Where name is the name of the new attribute as a string, value is the value of the attribute.

The following are a few examples of creating elements using DOM which would then be appended or inserted using the methods above.

domForm = document.createElement("FORM") // create new form
domForm.setAttribute("name","form_name") // form name

newInput = document.createElement("INPUT") // create inputs
newInput.setAttribute("type","text") // input type
newInput.setAttribute("name","element_name") // inputs name
newInput.setAttribute("value","input_value") // inputs value

domForm.appendChild(newInput) // add input to form

elementToAppendTo.appendChild(domForm)

domTable=document.createElement("TABLE")
domTable.setAttribute("border","2")

tBody=document.createElement("TBODY")

newRow=document.createElement("TR")

newCell = document.createElement("TD")
newCellText=document.createTextNode("New Table")

newCell.appendChild(newCellText)
newRow.appendChild(newCell)
tBody.appendChild(newRow)
domTable.appendChild(tBody)

elementToAppendTo.appendChild(domTable)

domLink=document.createElement("A")
domLink.setAttribute("href","page.htm")
domLinkText=document.createTextNode("Link")
domLink.appendChild(domLinkText)

elementToAppendTo.appendChild(domLink)

function externalLinks(){ 
if(!document.getElementsByTagName) return
var anchors = document.getElementsByTagName("a") 
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i]
if(anchor.getAttribute("href") && anchor.getAttribute("rel") == "external")
anchor.target = "_blank"
} 
} 

window.onload = externalLinks

<a href="document.html" rel="external">external link</a>

domDiv = document.createElement("DIV")
domDiv.setAttribute("id","mydiv")
domDivTxt=document.createTextNode("Hello World")
domDiv.appendChild(domDivTxt)

elementToAppendTo.appendChild(domDiv)

newList=document.createElement("UL")

newListEl=document.createElement("LI")
newListText=document.createTextNode("List One")

newListEl.appendChild(newListText)
newList.appendChild(newListEl)

el.appendChild(newList)

Remove Nodes

var myDiv = document.getElementById('div')
while(myDiv.hasChildNodes()){
alert("Removing "+myDiv.childNodes[0].nodeName)
myDiv.removeChild(myDiv.childNodes[0])
}

Or

myDiv = document.getElementById('div')
while(myDiv.firstChild){
alert("Removing "+myDiv.firstChild.nodeName)
myDiv.removeChild(myDiv.firstChild)
}

Applying css

with(domElement.style){
width="200px"
backgroundColor="#FF0000"
border="1px solid blue"
}

Changing class

setAttribute("class","rulename") // moz

setAttribute("className","rulename") // IE

document.getElementById(id).className="rulename" // both