appending to the DOM

by Eugen Sunic

HTML

<p class="try">
mandarina
</p>
<p class="try">
maslina
</p>

CSS

.none{color:red;}
.some{color:green;}

JavaScript

// innerHTML
var elm=document.createElement('div');
elm.setAttribute('class','none');
elm.innerHTML='<p>something good</p><p>something good</p>';
document.body.appendChild(elm);

// innerText just text
var elm1=document.createElement('div');
elm1.setAttribute('maybe','none');
elm1.innerText='yes no yes no';
document.body.appendChild(elm1);

// change class
var elm2=document.createElement('div');
elm2.setAttribute('maybe','');
elm2.setAttribute('id','change');
elm2.innerText='yes no yes no';
document.body.appendChild(elm2);
document.getElementById('change').className='some'

// queryselectorall
var b=document.querySelectorAll('.try');

// hiddent text by css included
console.log(b[b.length-1].textContent); 

// hiddent text by css not included
console.log(b[b.length-1].innerText); 

// queryselector
var c= document.querySelector('.try');
console.log(c.textContent)

// with a text node and addEventListener delegate
var btn = document.createElement("button");        
var t = document.createTextNode("click me");        
btn.appendChild(t);                                
document.body.appendChild(btn);

btn.addEventListener('click', function(){window.alert('you just clicked me!')});

// add to parent immediately
window.document.querySelector('body').innerHTML+= "<p>new content</p>"

// textnode usage
var t= document.createTextNode("something");
var elm3= document.createElement('p');
elm3.appendChild(t);
document.body.appendChild(elm3);