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.

Prefer video?

Check out the guide from my YouTube channel.

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

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>