Forem: Mark "niteCoda" Freeman

A Tricky Case of insertAdjacentHTML()

Mark "niteCoda" Freeman — Wed, 27 Jan 2021 15:02:32 +0000

How to insert multiple adjacent JavaScript strings as HTML

As part of my commitment to #100HoursOfJavaScript study with @wesbos Beginner JavaScript, I stumbled upon a tricky challenge as part of the DOM Cardio - a series of small tests designed as a JavaScript workout. It really is!

I'm obviously a JavaScript beginner and this seemingly simple challenge really had me stumped on several attempts. It may be simple to many and there may be several ways to solve it. In any case, I thought I'd share my solution with a little explanation. I hope it helps you get out of a pinch too and I'd be pleased to see how you might go about resolving in your own way.

The overall challenge, using JavaScript alone, is to create a wrapper div into which we'll add two child divs. One containing an unordered list of three items, the other, two paragraphs.

Breaking down the challenge

1. Create a `div` with the class of `wrapper` and add it to the document body:

This first part shouldn't be too much trouble and here are the three lines of code we'll use:

const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
document.body.appendChild(wrapper);

2. Make an unordered list containing three list items, and place this list inside the wrapper.

This next step isn't too tricky either. We'll make use of backticks to make creation quick and easy:

 const list = `
  <ul>
    <li>list item one</li>
    <li>list item two</li>
    <li>list item three</li>
  </ul>
`;

Now we'll add those contents inside the wrapper:

wrapper.innerHTML = (list);

3. Using an HTML string, create another div with two paragraphs inside of it.

We already know how to do this, repeat the process above:

const div = `
  <div class="paragraphs">
    <p>Paragraph One</p>
    <p>Paragraph Two</p>
  </div>
`;

4. Now insert this new div before the unordered list from above.

And this is where things got tricky for me..........

We now need to insert the variable div (with the two paragraphs) adjacent to (before) the variable list. My go to solution was to use insertAdjacentHTML(), but that won't work.

Why?

Because the list content we created earlier in our code is a string, not HTML. That means we can't target it with this method...... yet.

Then how?

The way I went about solving this was by creating another variable listElement using querySelector().

const listElement = document.querySelector('ul');

The querySelector() method will target the ul inside the list string and the new variable listElement (we could have called it whatever we like) will hold valid HTML elements that will work alongside insertAdjacentHTML().

Now we can set about targeting the UL element, then placing our paragraphs div alongside using insertAdjacentHTML().

listElement.insertAdjacentHTML('beforebegin', div);

Note that insertAdjacentHTML() takes in two parameters for the insertion point: ('location' and the insertion). We wanted to insert the paragraphs before the list so we used beforebegin as our insertion point.

The range of location options are:

beforebegin = before element
afterbegin = before first child of element
beforeend = after last child of element
afterend = after element

LINKS

@nitecoda
MDN Web Docs insertAdjacentHTML
Beginner JavaScript from @wesbos

JavaScript Event Listeners for Beginners

Mark "niteCoda" Freeman — Tue, 26 Jan 2021 14:33:12 +0000

What Are Events and Listeners?

Visitors to our websites, and users of our applications, are continuously interacting with elements of the Document Object Module (DOM), whether they realise it or not.

When these interactions occur, the elements themselves emit event actions. As JavaScript developers, we're able to listen for these events using the JavaScript method for event listeners and then handle them with appropriate and well-timed responses. Assuming that's our our aim, and it certainly should be.

Why Should We Listen for Element Events?

Responding to user activity can greatly enhance user experience and interactivity leading to improved engagement.

What are Events Exactly?

Events vary according to element type, most are obvious but some not so. They include, for example;

Mouse events:- such as mouseover, mousedown, mouseup and click;
Keyboard events:- such as keydown and keyup;
Form events:- such as focus and submit;
Window events:- such as scroll and resize;
to name but a few.

A detailed explanation to writing your first simple event listener:

Step 1 - Target the element and declare a new variable.

The very first step in preparing our code for listening and handling events, is to declare a variable for the element that will be emitting the event we're interested in. In the following simple example, that element is a button with the class click-me.

We'll declare a variable with an intuitive name; clickMe and use the button's class of click-me to select the element from within the document, using the JavaScript method .querySelector():

const clickMe = document.querySelector('.click-me');

2. Call the `click-me` variable that we've just declared for the button:

click-me

3. Next, we attach to that variable, the JavaScript method for event listening `.addEventListener()`.

click-me.addEventListener();

The event listener takes in two parameters, comma-separated, inside the parenthesis:

- The first is the emit event which sets up the listener. In this example we'll listen for a click event.
- The second, a function that will be called to action when the specified event occurs. This function is known as a callback function and in this example, it has no name and so, is anonymous.

4. Add the event Parameters

Our Parameters in this case are click, and an empty function function().

click-me.addEventListener('click', function());

5. Add a code block:

Next We'll open up a code block { } which will contain the code for the action we wish to take place in response to the event:

click-me.addEventListener('click', function() {  });

6. Add a callback response

Inside the code block, we'll simply output an appropriate message to the console using console.log();

clickMe.addEventListener('click', function() {
  console.log(`the button with class 'click-me' button was clicked`);
});

Our event listener is now complete with response and feedback.

This simple event listener will execute a log to the console every time the button is clicked. It will also work if the user focuses the button using tab, and presses the enter key.

A simple way to remember event listeners

If all of this seems too much to remember at first, a simple way to remember the role and key ingredients of an event listener is this:

Get click-me button
Listen click event
Do console.log

Hopefully, this will help you along your own path towards JavaScript mastery.