Inserting and Deleting Nodes Cheat Sheet

A cheat sheet in English by [deleted]

Enhancing the DOM with JavaScript Lynda

4,737 views 1,374 downloads 22 Oct 2015 History
3.7 avg · 0 ratings

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 = myNode.cl­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])
myNode.pa­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)

Badges

Nice Cheat Sheet

Comments

No comments yet.

Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.