HtmlChange

In this example below you will see how to do a HtmlChange with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by felvieira, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright felvieira ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HtmlChange</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
  
</head>

<body>

  <div class="article-content-answer">
	<h1>Quem pode aderir à promoção?</h1>
	<p>
	</p>
	<p>
		<img alt="" border="0" height="200" hspace="0" src="https://static-or02.inbenta.com/bed29e480a1d6d68b228847e2588a08d86ec909407f9e1d8055af8167d43c74b/elegiveis%402x.png" style="width:200px;height:200px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;"
		 vspace="0" width="200">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
	</p>

	<ul>
		<li>
			Novos vendedores do PagSeguro que nunca tiveram conta anteriormente.&nbsp;
		</li>
		<li>
			Ou, vendedores que não realizaram vendas via maquininhas PagSeguro nos últimos 12 meses .
		</li>
	</ul>

	<p>
		<strong><a href="https://pagseguro.uol.com.br/para-seu-negocio/presencial/compare" target="_blank">Compare as Maquininhas</a> e compre a sua!</strong>
	</p>

	<p>
		<strong><a href="https://pagseguro.uol.com.br/para-seu-negocio/presencial/moderninha-pro" target="_blank"><img alt="" border="0" class="img-lg-fix" height="310" hspace="0" src="https://static-or02.inbenta.com/bed29e480a1d6d68b228847e2588a08d86ec909407f9e1d8055af8167d43c74b/moderninha-pro.png" style="width:170px;height:310px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;" vspace="0" width="170"></a><a href="https://pagseguro.uol.com.br/para-seu-negocio/presencial/moderninha-wifi" target="_blank"><img alt="" border="0" class="img-lg-fix" height="310" hspace="0" src="https://static-or02.inbenta.com/bed29e480a1d6d68b228847e2588a08d86ec909407f9e1d8055af8167d43c74b/moderninha-wifi.png" style="width:170px;height:310px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;" vspace="0" width="170"></a><a href="https://pagseguro.uol.com.br/para-seu-negocio/presencial/minizinha-chip" target="_blank"><img alt="" border="0" class="img-lg-fix" height="310" hspace="0" src="https://static-or02.inbenta.com/bed29e480a1d6d68b228847e2588a08d86ec909407f9e1d8055af8167d43c74b/minizinha-chip.png" style="width:170px;height:310px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;" vspace="0" width="170"></a><a href="https://pagseguro.uol.com.br/para-seu-negocio/presencial/minizinha" target="_blank"><img alt="" border="0" class="img-lg-fix" height="310" hspace="0" src="https://static-or02.inbenta.com/bed29e480a1d6d68b228847e2588a08d86ec909407f9e1d8055af8167d43c74b/minizinha.png" style="width:170px;height:310px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;" vspace="0" width="170"></a></strong>
	</p>

	<p>
		<strong><a href="https://pagseguro.uol.com.br/para-seu-negocio/presencial/moderninha-pro" target="_blank"><img alt="" border="0" class="img-md-fix" height="310" hspace="0" src="https://static-or02.inbenta.com/bed29e480a1d6d68b228847e2588a08d86ec909407f9e1d8055af8167d43c74b/moderninha-pro.png" style="width:170px;height:310px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;" vspace="0" width="170"></a><a href="https://pagseguro.uol.com.br/para-seu-negocio/presencial/moderninha-wifi" target="_blank"><img alt="" border="0" class="img-md-fix" height="310" hspace="0" src="https://static-or02.inbenta.com/bed29e480a1d6d68b228847e2588a08d86ec909407f9e1d8055af8167d43c74b/moderninha-wifi.png" style="width:170px;height:310px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;" vspace="0" width="170"></a><a href="https://pagseguro.uol.com.br/para-seu-negocio/presencial/minizinha-chip" target="_blank"><img alt="" border="0" class="img-md-fix" height="310" hspace="0" src="https://static-or02.inbenta.com/bed29e480a1d6d68b228847e2588a08d86ec909407f9e1d8055af8167d43c74b/minizinha-chip.png" style="width:170px;height:310px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;" vspace="0" width="170"></a><a href="https://pagseguro.uol.com.br/para-seu-negocio/presencial/minizinha" target="_blank"><img alt="" border="0" class="img-md-fix" height="310" hspace="0" src="https://static-or02.inbenta.com/bed29e480a1d6d68b228847e2588a08d86ec909407f9e1d8055af8167d43c74b/minizinha.png" style="width:170px;height:310px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;" vspace="0" width="170"></a></strong>
	</p>

	<p>
		<strong><a href="https://pagseguro.uol.com.br/para-seu-negocio/presencial/moderninha-pro" target="_blank"><img alt="" border="0" class="img-sm-fix" height="310" hspace="0" src="https://static-or02.inbenta.com/bed29e480a1d6d68b228847e2588a08d86ec909407f9e1d8055af8167d43c74b/moderninha-pro.png" style="width:170px;height:310px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;" vspace="0" width="170"></a></strong>
	</p>

	<p>
		<strong><a href="https://pagseguro.uol.com.br/para-seu-negocio/presencial/moderninha-wifi" target="_blank"><img alt="" border="0" class="img-sm-fix" height="310" hspace="0" src="https://static-or02.inbenta.com/bed29e480a1d6d68b228847e2588a08d86ec909407f9e1d8055af8167d43c74b/moderninha-wifi.png" style="width:170px;height:310px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;" vspace="0" width="170"></a></strong>
	</p>

	<p>
		<strong><a href="https://pagseguro.uol.com.br/para-seu-negocio/presencial/minizinha-chip" target="_blank"><img alt="" border="0" class="img-sm-fix" height="310" hspace="0" src="https://static-or02.inbenta.com/bed29e480a1d6d68b228847e2588a08d86ec909407f9e1d8055af8167d43c74b/minizinha-chip.png" style="width:170px;height:310px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;" vspace="0" width="170"></a></strong>
	</p>

	<p>
		<strong><a href="https://pagseguro.uol.com.br/para-seu-negocio/presencial/minizinha" target="_blank"><img alt="" border="0" class="img-sm-fix" height="310" hspace="0" src="https://static-or02.inbenta.com/bed29e480a1d6d68b228847e2588a08d86ec909407f9e1d8055af8167d43c74b/minizinha.png" style="width:170px;height:310px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px;border:0px solid black;" vspace="0" width="170"></a></strong>
	</p>
	<p></p>

	<div class="rating">
		<h2 class="rating__title">
			Respondemos a sua dúvida?
		</h2>
		<input type="hidden" name="csrf-token" value="85hZQ7YB-g38HMvcAgl9TbEqwf54OLkzvbS4">
		<div class="rating__rate">

			<label class="rating__rate--yes">
							
																								<input type="radio" name="optradio-choose" class="radio-opt yes" value="eyJpdiI6InFhZWdyUWdlbEZuNDZsXC9WaHdXdmt3PT0iLCJ2YWx1ZSI6InY0bUI5dzhQVHlRVmNjbTIrWTJHdkxBVnpwQ0E3N0sxWTNcL2FpQ3BLclF5WHg2TjEyeStuMGtwUjZsVEYycnM1djNrbTdQK1c0M29mRTlBSEdHWll6WTV6Y3BaRGk0VUdjNE0rUTlTOHVMb2VWdDJtUjVweFhWY2ZWWVgwWWMzcyIsIm1hYyI6ImY3NTlhMzA0OWI5ZDgwMTlkYzgwMjM1MDM1YjgzZDk5YzIxN2ExZDQ4YjBkMjA4YzAwNTk2MDA4YjljOWYyMjgifQ==">
																								<i class="icon-feedback_positivo_v2"></i>
																								<span class="rate-yes">Sim</span>
																								<span class="radio-form-send yes" style="display:none;"><p></p></span>
																								<span class="radio-form-send max" style="display:none;"><p></p></span>
																								<span class="radio-form-send loader" style="display:none;margin-left: -8px;">
																									<span class="loading rating" style="display:none;">
																									    <i class="icon-loader_v2"></i>
																									</span>																	</span>
																						</label>

			<label class="rating__rate--no">
																								<input type="radio" name="optradio-choose" class="radio-opt no" value="eyJpdiI6InFhZWdyUWdlbEZuNDZsXC9WaHdXdmt3PT0iLCJ2YWx1ZSI6InY0bUI5dzhQVHlRVmNjbTIrWTJHdkxBVnpwQ0E3N0sxWTNcL2FpQ3BLclF5WHg2TjEyeStuMGtwUjZsVEYycnM1djNrbTdQK1c0M29mRTlBSEdHWll6WTV6Y3BaRGk0VUdjNE0rUTlTOHVMb2VWdDJtUjVweFhWY2ZWWVgwWWMzcyIsIm1hYyI6ImY3NTlhMzA0OWI5ZDgwMTlkYzgwMjM1MDM1YjgzZDk5YzIxN2ExZDQ4YjBkMjA4YzAwNTk2MDA4YjljOWYyMjgifQ==">
																								<i class="icon-feedback_negativo_v2"></i>
																								<span class="rate-no">Não</span>
																								<span class="radio-form-send no">
																									<form action="" class="radio-form">
																											<span class="radio-form-send radio" style="display:none;"><p></p></span>
																											<div class="radio">
																												<label class="control control-radio">
																												<span class="">As informações estão incorretas</span>
																												<input type="radio" name="optradio" class="radio-opt control-radio-no" value="As informações estão incorretas">
																													<div class="control_indicator"></div>
																												</label>
		</div>

		<div class="radio">
			<label class="control control-radio">
																												<span class="">O texto está confuso ou incompleto</span>
																												<input type="radio" name="optradio" class="radio-opt control-radio-no" value="O texto está confuso ou incompleto">
																													<div class="control_indicator"></div>
																												</label>
		</div>

		<div class="radio">
			<label class="control control-radio">
																													<span class="">Não respondeu minha pergunta</span>
																												<input type="radio" name="optradio" class="radio-opt control-radio-no" value="Não respondeu minha pergunta">
																													<div class="control_indicator"></div>
																												</label>
		</div>

		<div class="radio">
			<label class="control control-radio">
																													<span class="">A resposta é muito longa</span>
																													<input type="radio" name="optradio" class="radio-opt control-radio-no" value="A resposta é muito longa">
																													<div class="control_indicator"></div>
																												</label>
		</div>

		<div class="radio">
			<label class="control control-radio control-radio-block">
																													<span>Outro</span>
																												<input type="radio" name="optradio" class="radio-opt control-radio-no no-form">
																													<div class="control_indicator"></div>
																												
																												<span class="radio-form-send no-form"><textarea name="" id="" cols="80" rows="5" class="radio-no-custom-input" minlength="3" maxlength="200" required=""></textarea>
																												<span class="max-lenght">0 / 200</span>
																												<span class="radio-form-send custom" style="display:none; margin-bottom: 20px;width: 90%;"><p></p></span>
																												<button type="submit" class="radio-no-custom">Enviar</button></span>
																												<button type="submit" class="radio-no-custom-submit" style="display:none;">Enviar</button>
																												
																												</label>
		</div>

		</form>
		</span>
		</label>

	</div>
</div>
<p>
	<a href="/" class="button button--blue">Página inicial de ajuda</a>
</p>

</div>

<div id="results-answer"><div/>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/felvieira/htmlchange-geJYoX */
function $id(el) {
	return document.getElementById(el);
}

function $name(el) {
	return document.getElementsByName(el);
}

function $tag(el) {
	return document.getElementsByTagName(el);
}

function $all(el) {
	return document.querySelectorAll(el);
}

function $sel(el) {
	return document.querySelector(el);
}

function hasClass(target, className) {
	return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}

function addClass(ele, cls) {
	if (!hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
	if (hasClass(ele, cls)) {
		var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
		ele.className = ele.className.replace(reg, '');
	}
}

// Ex de uso toggleClass(nomeElemento,'classeToglada')
function toggleClass(ele, cls) {
	if (ele.classList) {
		ele.classList.toggle(cls);
	} else {
		var classes = ele.className.split(' ');
		var existingIndex = -1;
		for (var i = classes.length; i--;) {
			if (classes[i] === cls) existingIndex = i;
		}

		if (existingIndex >= 0) {
			classes.splice(existingIndex, 1);
		} else {
			classes.push(cls);
			ele.className = classes.join(' ');
		}
	}
}

function hasImage(el) {
	var childElements = el.childNodes;
	for (var i = 0; i < childElements.length; i++) {
		if (childElements[i].localName != null && childElements[i].localName.toLowerCase() == "img") {
			if (childElements[i].getAttribute('src')) {
				return true;
			}
		}
	}
	return false;
}

var container = $all(".article-content-answer p a");
var result = $id("results-answer");

for (var i = 0; i < container.length; i++) {
	var element = container[i];
	console.log(container[i]);
	if (hasImage(element)) {
		// element.parentElement.innerHTML = `<span>${element.outerHTML}</span>`
		// let doc = new DOMParser().parseFromString(element, 'text/html');
		// result.insertAdjacentHTML('beforeend', `<span>${element.outerHTML}</span>` );
		console.log("PARENT:" + element.parentElement);
		console.log("PARENT:" + element.parentElement.parentElement);
		console.log("PARENT:" + element.parentElement.parentElement.parentElement);

		addClass(element.parentElement.parentElement, 'imagem');
	}
}

// console.log(container);

Comments