Метод createElement

Метод createElement омогућава креирање новог елемента прослеђивањем имена тага као параметра. Након креирања, са елементом се може радити као са уобичајеним елементом, а такође се може додати на страницу методама prepend, append, appendChild, insertBefore или insertAdjacentElement.

Ако се резултат рада createElement упише у променљиву, у тој променљивој ће бити такав елемент, као да смо га добили помоћу querySelector или getElementById. Једина разлика - наш елемент неће бити смештен на страници. Иначе можемо мењати му innerHTML, атрибуте, додавати руковаоце догађаја и на крају га сместити на страницу.

Синтакса

document.createElement('име тага');

Пример

Хајде да креирамо пасус, поставимо му текст и сместимо на страницу на крај блока #parent:

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

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Резултат извршавања кода:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

Пример

Дат је ul. Хајде да сместимо у њему 9 тагова li, при чему ћемо њихов текст направити редним бројевима:

<ul id="parent"></ul>

let parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

Резултат извршавања кода:

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

Пример

Хајде да приликом уметања елемената вежемо за њих руковаоце догађаја:

<ul id="parent"></ul>

let parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	
	li.addEventListener('click', function() {
		alert(this.textContent);
	});
	
	parent.appendChild(li);
};

Погледајте такође

метод cloneNode,
којим се може клонирати елемент
метод createTextNode,
којим се може креирати нови текстуални чвор