Installation
CSS Selectors
Event Handling
DOM Manipulation
Utilities
Data Structures
AJAX APIs
Animation APIs
Widgets Creation
.addChild( "Child_Tag_Name" [, Properties ] [, Position ]) - Add a Child element
.addChild() will append a child element to a parent. It can set attributes to the child using the Properties parameter. And child can be attached to a specific index using Position parameter.
Parameters
NameTypeDefaultPossible ValuesDescription
Child_Tag_NameStringTag NamesChild tag names
PropertiesJSONAttributes for Elements Attribute names and values will be set for the new child element. "text" property will set inner Text content.
PositionNumberOptionalPosition(order) at which the new child has to be attached
Returns
NameTypeDescription
child element$.ObjsAfter appending child element to parent, child element is wrapped as Nedil Object and returned.
Example 1
Clicking on "Add Child" button will add a child div element to #parent.
JS HTML CSS 
		$.domLoaded(function() {

			$.get("#add").on("click", function() {
			
				//add a div child to #parent
				$.get("#parent").addChild("div", {
					"class" : "child",
					"text" : "Child"
				});
				
			});
			
		});						
						
<body>

<div id="parent"> Parent </div>

<br/>

<input type="button" id="add" value="Add Child" />

</body>
		#parent {
			display : inline-block;
			width : 100px;
			height : 100px;
			border : 2px solid red;
			padding : 10px;
		}
		
		.child {
			width : 50px;
			height : 30px;
			border : 2px solid blue;
		}
Result
Example 2
Using Nedil.Objs of child element which is returned by .addChild() and attach a click event to the new child.
JS HTML CSS 
		$.domLoaded(function() {

			$.get("#add").on("click", function() {
			
				//add a div child to #parent and ch is child Nedil object
				var ch = $.get("#parent").addChild("div", {
					"class" : "child",
					"text" : "Clickable Child"
				});
				
				ch.on("click", function() {
					alert("You Clicked on Child");
				});
				
			});
			
		});					
						
<body>

<div id="parent"> Parent </div>

<br/>

<input type="button" id="add" value="Add Child" />

</body>
	#parent {
			display : inline-block;
			width : 100px;
			height : 100px;
			border : 2px solid red;
			padding : 10px;
		}
		
		.child {
			width : 70px;
			height : 50px;
			border : 2px solid blue;
		}
Result
Example 3
Usually addChild() function will attach the new child as the last one. This example explains how to attach a child at a specified index (position).
JS HTML CSS 
		$.domLoaded(function() {

			$.get("#add1").on("click", function() {
			
				//add a div child to #parent at 2nd position
				$.get("#parent").addChild("div", 1);
				
			});
			
			$.get("#add2").on("click", function() {
			
				//add a div child to #parent at 3rd position with properties
				$.get("#parent").addChild("div", {
					"text" : "New Child",
					"class" : "diff"
				}, 2);
				
			});			
			
		});					
						
<body>

<div id="parent"> 
	<div> child 1 </div>
	<div> child 2 </div>
	<div> child 3 </div>
</div>

<br/>
<input type="button" id="add1" value="Add Child at 2nd Position" />
<input type="button" id="add2" value="Add Child at 3rd Pos with Class & Text" />

</body>
		div {
			width : 50px;
			height : 30px;
			margin : 5px;
			padding : 10px;
			background-color : yellowgreen;
		}
		
		#parent {
			display : inline-block;
			width : 100px;
			height : 300px;
			background-color : #fff;
			border : 2px solid red;
			padding : 10px;
		}
		
		.diff {
			background-color : #aaf;
		}
Result