Креирање и уметање елемената у ЈаваСкрипту

Сада ћемо научити како да креирамо нове DOM елементе преко ЈаваСкрипта, а затим да их додамо на страницу. За то је намењена метода createElement. Параметром ове методе треба проследити назив тага који треба бити креиран.

Ако резултат рада createElement упишемо у променљиву, онда ће у тој променљивој бити такав елемент, као да смо га добили преко querySelector.

Једина разлика - наш елемент неће бити смештен на страници. Али можемо мењати му текст, атрибуте, додавати руковаоце догађаја и на крају сместити га на страницу.

За смештање новог елемента на страницу примењује се метода appendChild. Ову методу треба применити на онај елемент, у који желимо да сместимо наш елемент. А параметром методе треба проследити наш нови елемент, који је креиран раније преко createElement.

Погледајмо на практичном примеру. Нека имамо див, а у њему - неколико параграфа:

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

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

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

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

parent.appendChild(p);

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

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

html<ol id="elem"></ol>

html<ol id="elem"></ol>
<button id="button">кликни ме</button>