OVdPoo

index.html

<input type="button" id="addChild" value="Add child">
<hr>
<div id="parent">
</div>
<hr>
<div id="total">Total children: <span></span></div>

OVdPoo.markdown

OVdPoo

A Pen by Andy Westmoreland on CodePen.

License.

script.js

$(document).ready(function() {

  countChildren();

  $('#addChild').on('click',function(){
    addChild();
  });

  // Load clearly isn't going to work, but how else do 
  // I detect a new element added to the page?
  $('#parent').on('load','.child', function() {
    countChildren();
  });

});

function countChildren(){  
  $('#total span').text($('#parent .child').length);
}

function addChild(){
  $('<div class="child">Child</div>').appendTo('#parent');
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>