Categories
Action Adding Changing JavaScript

JavaScript for optimizers #2: Replacing and adding titles

Our hypothetical case for this chapter is about replacing and adding titles.

Our client’s research showed that a website should change the copy to better fit its target group.

Surveys on their website showed that users find their main copy extremely dull and repetitive.

Business case: Replacing and adding titles

We use this insight to create a testing hypothesis:

“Because we saw that users find the main copy extremely dull, we expect that changing the copy to better fit the target group will cause an increase in sales. We’ll measure this using conversion-rate.”

We are going to test this hypothesis with the following change:

The change we are going to make
The change we are going to make

Code

We will execute this change by running the following JavaScript code on the testing page. Try it out for yourself to see how it works!

//replace title
var getTitleNode = document.querySelector("h1");
var newTitle = "This title is much better";
var getHeaderElement = document.querySelector(".entry-header-inner");
getTitleNode.innerText = newTitle;

//add subtitle
var newSubtitle = document.createElement("h2");
var newSubtitleNode = document.createTextNode(
  "It will be even better with a subtitle."
);
newSubtitle.appendChild(newSubtitleNode);
getHeaderElement.appendChild(newSubtitle);

Breakdown

New syntax

The breakdown starts by going over all the new syntax in the example. Future articles will not repeat any of the discussed syntaxes. All the explanations have a link to the full documentation of the syntax if you need more information.

// is a comment. Starting a line of code with two forward slashes will tell the program not to execute all of the code in that line. It can be used to make code more readable for other programmers or your future self.

“This title is much better” is a string value. It’s an object that contains characters that you can manipulate with your code. It usually contains text, but it can have numbers too. The main key here is that it can hold data in text form.

.innerText is a method of an element and allows you to change the rendered text. It replaces the text of the element with the value provided. You can use a string to change the text to something else.

.createElement(tagName) is a method that creates an HTML element that you want to add. This method is used when you need to insert new elements into a page. The argument you give the method will decide what element is created.

“h2” is an example of a tagName. This tagName tells the method to create an h2 element.

.createTextNode(string) is a method that creates a text node that you can add to a created element before appending it to the DOM. It accepts a string to create the text node.

.appendChild(node) is a method that adds a child element to the parent element that is passed down as the argument. It will add it after all the other children of the parent.

newSubtitle is an example of a node. It was saved to this variable in order to append it to the DOM.

Logic

The first three lines of code are about replacing the main title of the website.

var getTitleNode = document.querySelector("h1");

In the first line of code, we assign the page’s title to a variable with the querySelector method. It used the h1 CSS selector to select the first h1 on the page. Pages usually don’t have more than one h1 because of SEO reasons, so this should be a reliable way of selecting h1 titles.

var newTitle = "This title is much better";

The following line of code assigns the string containing the new title that we will use to replace the old title. We want to replace the current title “JavaScript for optimizers: Testing page” with “This title is much better”.

var getHeaderElement = document.querySelector(".entry-header-inner");

This line of code assigns the parent element of our title to a variable, so we can append a new element to it later. We choose the parent element because the append method puts an element inside another element. Take note of how I declared and assigned all variables at the top of the script even if they are not used immediately.

getTitleNode.innerText = newTitle;

The following line does the actual replacing of the current title with the new title we created. It does this by changing the text of the h1 element with the innerText method. After running this code, the change will be visible on the website.

Now we want to add a new subtitle to the website. We will need to do this differently because there isn’t an existing element available.

var newSubtitle = document.createElement("h2");

Before we can add an element to the DOM, we need to create it. This line of code creates an h2 element and assigns it to the variable.

var newSubtitleNode = document.createTextNode(
  "It will be even better with a subtitle."
);

We can add text to this element before adding it to the DOM. To use this technique, we need to create a text node with the createTextNode method. We will assign this to a different variable that we can combine with the h2 later.

newSubtitle.appendChild(newSubtitleNode);

We need to append the text node to the new h2 element before adding it to the DOM. We can do this by appending the node variable to the element variable.

getHeaderElement.appendChild(newSubtitle);

Finally, we need to place the newly created element containing our subtitle on the page. Because we selected the parent element earlier, we can easily append the element to the correct location in the DOM.

Here is an example to help you understand what happens:

<div class="entry-header-inner section-inner medium"><!--We target this element -->    
    <h1 class="entry-title">This title is much better</h1>
    <h2>It will be even better with a subtitle.</h2> <!--Appending places the element here -->
</div>

Exercise

The best way to learn JavaScript is to try it. I want you to change the code to you get this result:

The exercise example
The exercise example

This is what the HTML should look like after running the code:

<div class="entry-header-inner section-inner medium">
    <h1 class="entry-title">Changing titles is easy</h1>
    <h2>It will be even better with a subtitle.</h2>
    <h3>I can add new titles!</h3>
</div>

Check out the solution.