Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

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 = 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)
       
 

Metadata

  • Languages:
  • Published: 22nd October, 2015

Comments

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