How to add HTML? | Optiphoenix dev documentation

How to add HTML for AB Testing

Edit me

Overview

Normally we would create our own .html files, but in AB Testing, the original websites already exist and have their own HTML files. Instead of creating the whole page from scratch, we usually have to only create the new HTML elements and add them inside the existing page. There are a few ways to do it:

Add HTML using jQuery

jQuery is a JavaScript library. If you’re already using jQuery in your code, it is better to be consistent, so use jQuery to add your HTML. First, you’re gonna select a reference element that already exists in the DOM. Let’s take an example of already existing HTML on page, and see what jQuery functions add HTML and how.

<section class="custom-para-wrapper">
    <p>This is first para</p>
    <p>This is second para</p>
</section>

Note: jQuery(selector) selects all the elements that matches the selector, so make sure your HTML is not being added around multiple elements if it is not required.

Prepend

The prepend() method takes HTML as a string as its argument. It inserts the argument HTML as the first child inside each of reference element. For example, jQuery('.custom-para-wrapper').prepend('This is an HTML string'); would be inserted in the DOM like:

<section class="custom-para-wrapper">
    <span>This is an HTML string</span>
    <p>This is first para</p>
    <p>This is second para</p>
</section>

Append

The append() method takes HTML as a string as its argument. It inserts the argument HTML as the last child inside each of reference element. For example, jQuery('.custom-para-wrapper').append('This is an HTML string'); would be inserted in the DOM like:

<section class="custom-para-wrapper">
    <p>This is first para</p>
    <p>This is second para</p>
    <span>This is an HTML string</span>
</section>

Before

The before() method takes HTML as a string as its argument. It inserts the argument HTML before the start of each of the reference element. For example, jQuery('.custom-para-wrapper').before('This is an HTML string'); would be inserted in the DOM like:

<span>This is an HTML string</span>
<section class="custom-para-wrapper">
    <p>This is first para</p>
    <p>This is second para</p>
</section>

After

The after() method takes HTML as a string as its argument. It inserts the argument HTML after the end of each of the reference element. For example, jQuery('.custom-para-wrapper').after('This is an HTML string'); would be inserted in the DOM like:

<section class="custom-para-wrapper">
    <p>This is first para</p>
    <p>This is second para</p>
</section>
<span>This is an HTML string</span>

Warning: You need to wait for jQuery to load before you can use it to insert HTML.

Add HTML using JavaScipt

JavaScript is faster than jQuery and you don’t have to wait for it to load. You may have to wait for the reference element to exist though. JavaScript functions are also faster than jQuery. JavaScript has its own functions that can add HTML. Let’s have a look:

Insert HTML string - insertAdjacentHTML()

The insertAdjacentHTML() method is quite similar to all the jQuery methods mentioned above. First, you need to get a reference element like document.querySelector('.custom-para-wrapper') but unlike jQuery, HTML can be inserted to only 1 element at a time. Use loops if needed. The method, .insertAdjacentHTML(position, html) take 2 strings as arguments. The second argument is the HTML as a string, same as the argument we pass for the jQuery methods. The first argument position can have 4 possible values:

beforebegin

To insert HTML before the reference element. This is the same as before() in jQuery.

document.querySelector('.custom-para-wrapper').insertAdjacentHTML('beforebegin', '<span>This is an HTML string</span>');

afterbegin

To insert HTML just inside the reference element, before its first child. This is the same as prepend() in jQuery.

document.querySelector('.custom-para-wrapper').insertAdjacentHTML('afterbegin', '<span>This is an HTML string</span>');

‘beforeend’

To insert HTML just inside the reference element, after its last child. This is the same as append() in jQuery.

document.querySelector('.custom-para-wrapper').insertAdjacentHTML('beforeend', '<span>This is an HTML string</span>');

'’afterend’’

To insert HTML after the reference element. This is the same as after() in jQuery.

document.querySelector('.custom-para-wrapper').insertAdjacentHTML('afterend', '<span>This is an HTML string</span>');

Insert as Nodes

The previous method, to add HTML as string is definitely better as it requires less lines of code so that is definitely better. To add HTML using Nodes, you need to create a node and then insert it using one of the methods mentioned below.

Create a node

Before we learn how to create a node, click here to read more about nodes. Here is how you can create nodes.

You need to define the type of tag of the wrapping HTML tag.
You need to add attributes if any.

You need to add the innerHTML.

var exampleNode = document.createElement('span');
exampleNode.classlist.add('custom-span');
exampleNode.innerHTML = 'This is an HTML string';

Add using appendChild()

The appendChild() method is similar to append() in jQuery, however instead of passing an HTML string as argument, we pass a node that we created as the argument.

var exampleNode = document.createElement('span');
exampleNode.classlist.add('custom-span');
exampleNode.innerHTML = 'This is an HTML string';
document.querySelector('.custom-para-wrapper').appendChild(exampleNode);

Add using insertBefore()

This method insertBefore() inserts the node before the reference node, similar to before() in jQuery. However it has a bit different format than the other methods mentioned above:

parentNode.insertBefore(newNode, referenceNode);

newNode is the node to be insert i.e. exampleNode.
referenceNode is the node before which we want to insert our newNode.
parentNode is the parent of the referenceNode in which we want to add our new node.

var exampleNode = document.createElement('span');
exampleNode.classlist.add('custom-span');
exampleNode.innerHTML = 'This is an HTML string';

var reference = document.querySelector('.custom-para-wrapper');
var parent = reference.parentElement;
parent.insertBefore(exampleNode, reference);

Click here to learn more about how we can use this function to insert node after the reference element as well.

Tip: You can use these methods to change position of already existing nodes in the DOM as well.

Multiline Strings

As we have seen above, we are adding HTML as strings, whether it be directly in the DOM or inside other nodes. We save these strings in a variable, but for these strings to be readable (which should be a priority), we need to have proper indentation like any other HTML. Therefore, these strings will be on multiple lines.

Template Literals

Template Literals were introduced in ES6 and provide the ease of multine strings which single and double quotes don’t allow. They are enclosed by the backtick character ( `` ). You can read more about it here.

var html = `
        <div class="custom-banner-list wow fadeInUp">
            <p>The fast, easy and convenient way to shop <br> everywhere and manage your repayments.</p>
        </div>`;

ES5 alternative - join(‘’)

However, because template literals are not supported in all browsers, unless you’re working with tools like Webpack, it is recommended that you use the following method for your strings. Instead of adding 1 multine string, we add multiple single line strings inside the array with proper indentation on each line and convert this array into 1 single string using join('').\

var html = [
        '<div class="custom-banner-list wow fadeInUp">',
        '    <p>The fast, easy and convenient way to shop <br> everywhere and manage your repayments.</p>',
        '</div>',
    ].join('');

In this example, it shows 3 strings inside an array and that array is joined together as a string which is saved inside the html variable. Checkout the following video on how you can quickly convert multiline strings to this alternative format:

Tags: