Take & Put HTML

				
function takePutHtml(objParams = {}){

	this.htmlToTake = objParams.htmlToTake;
	this.containerToPut = objParams.containerToPut;
	this.posHtml = objParams.posHtml;
	this.classTakeContent = objParams.classTakeContent;
	this.classPutContent = objParams.classPutContent;
	this.clearReference = objParams.clearReference;

	this.htmlToTake = document.querySelector(objParams.htmlToTake).outerHTML;
	this.containerToPut = document.querySelector(objParams.containerToPut);

	
	this.putHtml = function(){
		if(this.posHtml == "inner"){
			this.containerToPut.innerHTML = this.htmlToTake;
		}
		if(this.posHtml == "after"){
			this.containerToPut.insertAdjacentHTML("afterend",this.htmlToTake);
		}
		if(this.posHtml == "before"){
			this.containerToPut.insertAdjacentHTML("beforebegin",this.htmlToTake);
		}
		if(this.posHtml == "append"){
			this.containerToPut.insertAdjacentHTML("beforeend",this.htmlToTake);
		}
		if(this.posHtml == "prepend"){
			this.containerToPut.insertAdjacentHTML("afterbegin",this.htmlToTake);
		}
	}

	this.putClassTakeContent = function(){
		document.querySelector(objParams.htmlToTake)
		.classList.add(objParams.classTakeContent);

	}

	this.putClassPutContent = function(){
		var pos = this.posHtml,
		el, index;

		switch(pos){
			case "inner":
				el  = this.containerToPut.childNodes;
				el[0].classList.add(objParams.classPutContent);
				break;

			case "after":
				el = this.containerToPut.nextElementSibling;
				el.classList.add(objParams.classPutContent);
				break;

			case "before":
				el = this.containerToPut.previousElementSibling;
				el.classList.add(objParams.classPutContent);
				break;

			case "append":
				el = this.containerToPut.childNodes,
				index = el.length-1;
				el[index].classList.add(objParams.classPutContent);
				break;

			case "prepend":
				el = this.containerToPut.childNodes,
				index = el.length;
				for(i = 0; i < index; i++){
					if(el[i].nodeType !== 3){
						el[0].classList.add(objParams.classPutContent);
					}
				}
				break;
		}
	}

	this.clearReferenceElement = function(){
		if(this.clearReference){
			document.querySelector("." + objParams.classTakeContent).innerHTML = "";
		}
	}

	this.init = function(){
		this.putClassTakeContent();
		this.putHtml();
		this.putClassPutContent();
		this.clearReferenceElement();
	}
}
		
window.onload = function(){

	var takePutHtml01 = new takePutHtml(
		objParams = {

			htmlToTake: ".main02", // string: exclusive selector -> example: ".main02" or "#wrapper > .main01 .element"
			containerToPut: ".main03", // string: exclusive selector -> example: ".main02" or "#wrapper > .main01 .element"
			posHtml: "prepend", // string: inner || after || before || append || prepend
			classTakeContent: "oldElement", // string
			classPutContent: "newElement", // string
			clearReference: false // boolean -> default false

		}
	);

	takePutHtml01.init();

} //window.onload
				

Example

Main01

Contenido de Main01. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, maiores, possimus! Recusandae amet illo rem eligendi delectus, tenetur eveniet, suscipit a repudiandae nulla blanditiis illum ex fugit nesciunt quaerat tempora? Quis neque veritatis blanditiis, aperiam.

Main02

Contenido de Main02. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, maiores, possimus! Recusandae amet illo rem eligendi delectus, tenetur eveniet, suscipit a repudiandae nulla blanditiis illum ex fugit nesciunt quaerat tempora? Quis neque veritatis blanditiis, aperiam.

Main03

Contenido de Main03. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, maiores, possimus! Recusandae amet illo rem eligendi delectus, tenetur eveniet, suscipit a repudiandae nulla blanditiis illum ex fugit nesciunt quaerat tempora? Quis neque veritatis blanditiis, aperiam.

Main04

Contenido de Main04. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, maiores, possimus! Recusandae amet illo rem eligendi delectus, tenetur eveniet, suscipit a repudiandae nulla blanditiis illum ex fugit nesciunt quaerat tempora? Quis neque veritatis blanditiis, aperiam.

Main05

Contenido de Main05. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, maiores, possimus! Recusandae amet illo rem eligendi delectus, tenetur eveniet, suscipit a repudiandae nulla blanditiis illum ex fugit nesciunt quaerat tempora? Quis neque veritatis blanditiis, aperiam.

Create & Put HTML

				
function createPutHtmlLink(objParams,objParamsLink){
	
	this.container = objParams.container;
	this.content = objParams.content;
	this.posHtml = objParams.posHtml;
	this.containerToPut = objParams.containerToPut;
	this.classPutContent = objParams.classPutContent;

	this.linkHref = objParamsLink.linkHref;
	this.linkText = objParamsLink.linkText;
	this.posLink = objParamsLink.posLink;

	this.createContainer = function(){
		this.container = document.createElement(this.container);

		if(this.classPutContent){
			this.container.className = this.classPutContent;
		}
	}

	this.createContent = function(){
		this.container.innerHTML = this.content;
	}

	this.putHtml = function(){

		var el =  document.querySelector(this.containerToPut),
		cont = this.container.outerHTML;

		if(this.posHtml == "inner"){
			el.innerHTML = cont;
		}
		if(this.posHtml == "after"){
			el.insertAdjacentHTML("afterend",cont);
		}
		if(this.posHtml == "before"){
			el.insertAdjacentHTML("beforebegin",cont);
		}
		if(this.posHtml == "append"){
			el.insertAdjacentHTML("beforeend",cont);
		}
		if(this.posHtml == "prepend"){
			el.insertAdjacentHTML("afterbegin",cont);
		}
	}

	this.putLink = function(){

		var el, link;
		el = document.querySelector("."+this.classPutContent);
		link = '<a href="'+this.linkHref+'" title="'+this.linkText+'">'+this.linkText+'</a>';

		if(this.posLink == "after"){
			el.insertAdjacentHTML("afterend",link);
		}
		if(this.posLink == "before"){
			el.insertAdjacentHTML("beforebegin",link);
		}
		if(this.posLink == "append"){
			el.insertAdjacentHTML("beforeend",link);
		}
		if(this.posLink == "prepend"){
			el.insertAdjacentHTML("afterbegin",link);
		}
	}

	this.init = function(){

		this.createContainer();
		this.createContent();
		this.putHtml();
		this.putLink();

	}

}
		
window.onload = function(){

	var createPutHtmlLink01 = new createPutHtmlLink(
		objParams = {
			container: "div",
			content:  '<h2>Elemento</h2>' // string: HTML
				+ '<p>Lorem ipsum dolor sit amet, consectetur.</p>'
				+ '<p>Lorem ipsum dolor.</p>',
			posHtml: "after", // string: inner || after || before || append || prepend
			containerToPut: "#htmlcreate .main02",// string: exclusive selector -> example: "#wrapper > .main01 .element"
			classPutContent:  "_newElement"// string
		},

		objParamsLink = {
			linkHref:"http://www.google.com",
			linkText: "texto del link",
			posLink: "prepend"

		}
	);

	createPutHtmlLink01.init();

} //window.onload
				

Example

Main01

Contenido de Main01. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, maiores, possimus! Recusandae amet illo rem eligendi delectus, tenetur eveniet, suscipit a repudiandae nulla blanditiis illum ex fugit nesciunt quaerat tempora? Quis neque veritatis blanditiis, aperiam.

Main02

Contenido de Main02. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, maiores, possimus! Recusandae amet illo rem eligendi delectus, tenetur eveniet, suscipit a repudiandae nulla blanditiis illum ex fugit nesciunt quaerat tempora? Quis neque veritatis blanditiis, aperiam.

Main03

Contenido de Main03. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, maiores, possimus! Recusandae amet illo rem eligendi delectus, tenetur eveniet, suscipit a repudiandae nulla blanditiis illum ex fugit nesciunt quaerat tempora? Quis neque veritatis blanditiis, aperiam.

Main04

Contenido de Main04. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, maiores, possimus! Recusandae amet illo rem eligendi delectus, tenetur eveniet, suscipit a repudiandae nulla blanditiis illum ex fugit nesciunt quaerat tempora? Quis neque veritatis blanditiis, aperiam.

Main05

Contenido de Main05. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, maiores, possimus! Recusandae amet illo rem eligendi delectus, tenetur eveniet, suscipit a repudiandae nulla blanditiis illum ex fugit nesciunt quaerat tempora? Quis neque veritatis blanditiis, aperiam.