Show Menu

Inserting and Deleting Nodes Cheat Sheet by [deleted]

Enhancing the DOM with JavaScript Lynda

Creating and appending nodes

docume­nt.c­re­ate­Ele­men­t(e­lement) Makes a new element
Has to be added to the DOM
node.a­ppe­ndC­hil­d(e­lement) Adds element inside a node

Contro­lling node insertions

append­Child() lacks precision
Need to insert a node anywhere in the node list
Use insert­Bef­ore() for surgical insertions
newNod­e.i­nse­rtB­efo­re(­pNode, newNod­e.c­hil­dNo­des[5])

Cloning and removing nodes

cloneN­ode() makes a copy
you can then reposition the node
remove­Chi­ld(­node) removes the node
Has to be called from a parent node
var newNode =­one­Nod­e(true) copy node and all its children
insert­Loc­ati­on.i­ns­ert­Bef­ore­(ne­wNode, insert­Loc­tio­n,c­hil­dNo­des[4])­ren­tNo­de.r­em­ove­Chi­ld(­myNode)

Replacing existing nodes

replac­eCh­ild() replaces a node
You must call it from the parent node
Saves you the step of having to delete the original
replac­eNo­de.p­ar­ent­Nod­e.r­epl­ace­Chi­ld(­myNode, replac­eNode)

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi


No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          More Cheat Sheets by [deleted]

          Modifying DOM Attributes and Content Cheat Sheet