My JavaScript journey

Day 13 of learning JavaScript: innerHTML and Template Strings

Sven Willhauk's photo
Sven Willhauk
·

2 min read

Hello! Today I learned about innerHTML and Template Strings in Javascript. Let's start with innerHTML. With innerHTML, you can manipulate and add HTML elements with JavaScript. For example, if someone has a div-container in the HTML file but forgot to add a button, you can add this button just by using JavaScript.

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="div-el">

        </div>
        <script src="index.js""></script>
    </body>
</html>

const container = document.getElementbyID("div-el")

container.innerHTML = "<button>BUY!</button>"    

// That's how you add an HTML-element with JavaScript

In our Chrome extension, we already have the unordered list to save elements in. We have to use innerHTML to add the List items every time we click the save button.

let myLeads = []
const inputEl = document.getElementById("input-el") 
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")


inputBtn.addEventListener("click", function(){
    myLeads.push(inputEl.value)
    inputEl.value = ""
})



for(let i = 0; i < myLeads.length; i++){
    ulEl.innerHTML = "<li id='lead'>" + myLeads[] + "</li>" 
}

//for every Element in the myLeads array, create a new list item
//id is just an example, you can delete it

As you see, when we use innerHTML together with JavaScript variables or arrays, the code can get messy fast. For example, if we want to add an ID to the elements, we also have to use quotation marks. But because we already have to use them to create inner HTML we have to use other single quotation marks to create the ID.

Therefore we have template strings. In a template string, you can store all the text and JavaScript variables you want without using a "+" and always open new quotation marks. It's much clearer and also easier to read the code.

What we want to do now is create the template string and create a function that adds all the list items to the template string and renders the string out in the end. We also have to add the anchor tags so we can click on the links. That's much easier with a template string.

let myLeads = []
const inputEl = document.getElementById("input-el") 
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")


inputBtn.addEventListener("click", function(){
    myLeads.push(inputEl.value)
    inputEl.value = ""
    renderLeads() //call the function 
})



function renderLeads(){ //create the function
    let listItems = "" //create the variable for the template string

    for(let i = 0; i < myLeads.length; i++){
        //that's how you open and close a template strings
        //you add JavaScript variables by writing ${variable/array/...}
        listItems += `
            <li>
                <a href= '${myLeads[i]}' target='_blank'>
                    ${myLeads[i]}
                </a>
            </li>`
    }

    ulEl.innerHTML = listItems

    //render out the template string as HTML
}

After that, the links should be clickable. I hope you learned something valuable!

innerHTMLtemplate stringsJavaScriptWeb Developmentchrome extension