element creation

 want to create and append to the present element?

index.html

     <!DOCTYPE html>

<html>

<head>

<title> understanding dom</title>

</head>

<body>

<div class="container">

 <div class="abc">first div

  <ul class="ul">

  <li>a</li>

  <li>b</li>

  <li>c</li>

  <li>d</li>

  </ul>

 </div>

 <div class="abc">second div</div>

 <div class="abc">third div</div>

 <div class="abc">fourth div</div>

 </div>

</body>

<script type="text/javascript" src="javascript.js"></script>

</html>

js

   let element=document.createElement('li')
element.className='rajiv'
element.id='dahal'
let textnode=document.createTextNode('I am a createTextNode')
element.appendChild(textnode)
console.log(element)
let mainelem=document.querySelector('.ul')
mainelem.appendChild(element)

output:

 first div

• a
• b
• c
• d
• I am a createTextNode--------------------->created dynamically

second div

third div

fourth div 

setting the attributes

    let element=document.createElement('li')

element.className='rajiv'

element.id='dahal'

element.setAttribute('method','post')

element.setAttribute('title','mytitle')