href

text

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
    var el = document.getElementsByTagName('a');
    el[0].href= 'http://www.sololearn.com';
};

<a href="http://www.example.com">Some link</a>
<br />
<a href="https://google.com">Google.com</a>

$

${expression}

let name = 'George'
let age = 25

document.write(`My name is ${name} and I am ${age} years old!`)

replaceChild

window.onload = function() {
    let p = document.createElement("p");
    p.innerHTML = "This is new";

    // Replaces the first p with the new one
    let parent = document.getElementById("demo");
    parent.replaceChild(p, document.getElementById("p1"));
};

<div id="demo">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>

p1

removeChild

window.onload = function() {
    var parent = document.getElementById("demo");
    parent.removeChild(document.getElementById("p1"));
};

<div id="demo">
    <p id="p1">This is a paragraph.</p>
    <p id="p2">This is another paragraph.</p>
</div>

insertBefore

node1

node2

function myFunction() {
  // Creates new list item
  let newItem = document.createElement("li");
  newItem.innerHTML = "Water";
  
  // Puts list item into myList before "tea" item
  let list = document.getElementById("myList");
  list.insertBefore(newItem, document.getElementById("tea"));
}

<ul id="myList">
  <li>Coffee</li>
  <li id="tea">Tea</li>
  <li>Cocacola</li>
</ul>

<p>Click the button to insert an item to the list.</p>

<button onclick="myFunction()">Try it</button>

this

fn()

window

firstName

lastName

this

let john = {
  firstName: 'John',
  lastName: 'Doe',
  driveCar() {
    function fn () {
      console.log(this.firstName + ' ' + this.lastName + ' is driving a car');  // "undefined undefined is driving a car"
      console.log(this);
    }
    fn(); // fn.call(this);
    console.log(this.firstName + ' ' + this.lastName + ' is driving a car'); 
    console.log(this)
  }
}

john.driveCar(); 

call

this

fn()

fn.call(this);

driveCar()

this

john

john

john.driveCar();

document.addEventListener("scroll", setBG);
function setBG() {
    if (!bgSet) {
        var bgSet=1;
        id('table_footer').style.background='url(/images/footer.jpg?tg)';
        document.removeEventListener("scroll", setBG);
        console.log('fired');
    }
}

textarea

input

function copy(part1, part2) {

    // Creates textarea element 
    var textarea = document.createElement('textarea');

    // Puts the text into the textarea with breaklines
    textarea.value = part1 + "\n\n" + part2

    // Adds the element to the DOM
    document.body.appendChild(textarea);

    // Selects the text that we want to copy
    textarea.select();

    // Copies the selected text clipboard
    var result = document.execCommand('copy');

    // Removes the element from the DOM because we no longer need it
    document.body.removeChild(textarea);
    return result;
}

hoisted(); // logs "foo"

function hoisted() {
  console.log('foo');
}

notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function() {
   console.log('bar');
};

map

getNames

getNames

let myFavoritePlanets = [
    {name: 'Earth', radius: 6371}, 
    {name: 'Jupiter', radius: 69911}, 
    {name: 'Neptune', radius: 24622, moons: ['Triton', 'Thalassa', 'Nereid', 'Proteus', 'Hippocamp', 'Naiad']}
]
let namesOnly = myFavoritePlanets.map(getNames);

function getNames(planet) {
  return planet.name
}
console.log(namesOnly);