example.html

<style>
	/* TEST ELEMENT CSS */
	#dynamic_content_1{
		width: 100px;
		height: 100px;
		background-color: #555;
	}
	#dynamic_content_2{
		width: 100px;
		height: 100px;
		background-color: red;
	}
	
	/*-------------------------------------------------
	FUNCTIONAL JS
	creates an animation which is triggered when an 
	item loads.
	-------------------------------------------------*/
	
		/* Used to detect when an element has loaded */
		@keyframes nodeInserted {  
			from { opacity: 0.99; }
			to { opacity: 1; }  
		}
		@-moz-keyframes nodeInserted {  
			from { opacity: 0.99; }
			to { opacity: 1; }
		}
		@-webkit-keyframes nodeInserted {  
			from { opacity: 0.99; }
			to { opacity: 1; }
		}
		@-ms-keyframes nodeInserted {  
			from { opacity: 0.99; }
			to { opacity: 1; }
		}
		@-o-keyframes nodeInserted {  
			from { opacity: 0.99; }
			to { opacity: 1; }
		} 
		
</style>

<div id="container"></div>

<script>

	/*------------------------
	RUN CODE WHEN ELEMENT EXISTS
	used for dynamically added content
	Based on the work by David Walsh and Daniel Buchner https://davidwalsh.name/detect-node-insertion
	------------------------*/
	var On_Element_Ready = function(id, callback){
		if ( document.getElementById(id) ){
			callback(); //if element is already loaded, don't set a listener
		}else{
			
			//use existing stylesheet or create a new one if one doesn't exist already
			var style = document.getElementById("dynamic-node-insert-detection-css") || 
				(function(){
					var style = document.createElement("style");
					style.id = "dynamic-node-insert-detection-css";
					style.setAttribute( "media", "screen" );
					style.setAttribute("data-dynamic-origin-comment", "Item dynamically added with javascript");
					style.appendChild( document.createTextNode("") );
					document.head.appendChild(style);
					return style;
				})();
			
			//add all prefixes to the animation rules
			var Prefix = function(str){
				var returnStr = "";
				var prefixList = ["", "-o-", "-ms-", "-webkit-"];
				for ( x in prefixList ){
					returnStr += prefixList[x] + str;
				}
				return returnStr
			};
			
			//add our new rules to this stylesheet
			style.sheet.insertRule("#" + id + "{"+
				Prefix("animation-duration: 0.001s;")+
				Prefix("animation-name: nodeInserted;")+
				"}", 0
			);
			
			//set up the callback for when the animation runs
			insertListener = function(event){
				if (event.animationName == "nodeInserted") {
					if (event.target.id == id){
						callback();
					}
				}
			}
			
			//wait for 'nodeInserted' animation to run
			document.addEventListener("animationstart", insertListener, false); // standard + firefox
			document.addEventListener("MSAnimationStart", insertListener, false); // IE
			document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
		}
	}
	
	
	/*------------------------
	TEST SCRIPTS
	------------------------*/
	//set up 'On_Element_Ready' calls
	On_Element_Ready("dynamic_content_1", function(){console.log("dynamic_content_1 loaded")});
	On_Element_Ready("dynamic_content_2", function(){console.log("dynamic_content_2 loaded")});
	
	//Make those items 1s and 2s after the page has loaded
	var container = document.getElementById("container");
	window.setTimeout(function(){
		var dynamic_content_1 = document.createElement("div");
		dynamic_content_1.id = "dynamic_content_1";
		container.appendChild( dynamic_content_1 );
	}, 1000);
	window.setTimeout(function(){
		var dynamic_content_2 = document.createElement("div");
		dynamic_content_2.id = "dynamic_content_2";
		container.appendChild( dynamic_content_2 );
	}, 2000);

</script>