Оптимизировать или упростить код
 

Всем доброго времени суток.
Есть вопрос по оптимизации кода.
Делаю велосипед (очередную валидацию формы), но вопрос только по куску кода.
Задача такая
Есть поля формы,

<input type="text" class="form-control " pattern="" placeholder="">

нужно перебрать все поля и если в поле есть атрибут pattern то нужно его обернуть в обертку и добавить еще несколько блоков. Должно получится так

<div class="val-wrapInput">
			<input type="text" class="form-control " placeholder="">
			<div class="val-wrapSuccess">
				<div class="val-success">
					<span class="val-leftSuccess"></span>
					<span class="val-rightSuccess"></span>
				</div>
			</div>
			<div class="val-wrapError">
				<div class="val-error">
					<div class="val-leftError"></div>
					<div class="val-rightError"></div>
				</div>
			</div>
		</div>

Сделал так (код на Typescript, но там все понятно, даже понятнее чем на JS):
Метод createElements запускается один раз при загрузке и создает нужные элементы

createElements(){
		this.wrapper = document.createElement('div');
		this.wrapper.className = 'val-wrapInput';
		this.success = document.createElement('div');
		this.success.className = 'val-wrapSuccess';
		this.success.innerHTML = '<div class="val-success">'
					+'<span class="val-leftSuccess"></span>'
					+'<span class="val-rightSuccess"></span>'
				+'</div>';
		this.error = document.createElement('div');
		this.error.className = 'val-wrapError';
		this.error.innerHTML = '<div class="val-error">'
					+'<span class="val-leftError"></span>'
					+'<span class="val-rightError"></span>'
				+'</div>';
	}

А метод addHtml перебирает поля формы клонирует уже созданные элементы предыдущим методом и оборачивает нужные поля в обертку и добавляет дополнительные блоки:

addHtml(){
		let input = this.form.getElementsByTagName('input');

		for (var i = 0; i < input.length; i++) {
			if(input[i].hasAttribute('pattern')) {
				let wrapper = this.wrapper.cloneNode(true);
				let success = this.success.cloneNode(true);
				let error = this.error.cloneNode(true);
				wrapper.innerHTML = input[i].outerHTML;
				input[i].parentNode.replaceChild(wrapper, input[i]);
				wrapper.appendChild(success);
				wrapper.appendChild(error);
			}
		}
	}

Все работает, но как то громоздко получилось, или это я к jQuery больше привык не знаю :)
Буду признателен за подсказки!

Bond,

input.insertAdjacentHTML('afterend', '<div class="val-wrapInput"><div class="val-wrapSuccess">...</div>...</div>');
input.nextSibling.insertBefore(input, input.nextSibling.firstChild);

Rise,
Спасибо Вам, удалось сократить код на целую гору операций и удалить лишний метод.