STACKBLITZ: https://stackblitz.com/@eugensunic 

Fiddle: click here
Testing HTML DOM properties and methods with JavaScript


// innerHTML
var elm=document.createElement('div');
elm.setAttribute('class','none');
elm.innerHTML='something good

something good

';
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
alert(b[b.length-1].textContent); 

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

// queryselector
var c= document.querySelector('.try');
alert(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+= "new content

"

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

Fiddle: click here
Testing JavaScript function calls

//first
(function(a,b){
   alert(a+" "+b);
})("eugen","sunic");

//second
var b= function(a,b){
   alert(a+" "+b);
}
b("eugen", "sunic");

//third- full standard
function name(a,b){
 alert(a+" "+b);
}
//name("eugen","sunic")

//fourth function
var a=(function(a,b){
     var c=a;
     var d=b;
    return function(){
     alert(c+" "+d);
    }
})("Eugen","Sunic");
a();

Fiddle: click here
Testing JavaScript closure, return three elements in an array every-time upon function call

var add = (function(array) {
  var index = 0;
  alert(index);
  return function() {
    if (index < array.length) {
      var new_array = [];
      for (var i = index; i < index + 3; i++) {
        new_array.push(array[i]);

      }
      index = i;
      alert(new_array);
    }
  }
})([1, 2, 3, 4, 5, 6, 7, 8, 9]);
add();
add();
add();
add();

Advertisements