In a world where so much of life is lived online, a sleek and efficient user experience is crucial.
It is important to get a user what they need as quickly and efficiently as possible. One of the ways this can be done is through Javascript's capability allowing for a user to append hyperlinks to the DOM without having to first build the tag in HTML.
For example, let's say that you have created a submit event that returns a web address from an API after a form has been submitted. In this instance, I created a search event which allowed users to enter a State in order to view a list of Breweries within that state. If all the user wanted was a list of returned web addresses appended to the DOM, that's great but what if you didn't want to have to make the client copy the returned web address and then go through the anguish of pasting it into the search bar. What if multiple values were returned and the client was on a phone and didn't have time to stop, copy and paste multiple values one at at time?
What if, you wanted to make the clients life even easier by returning an address that would take them to their destination with the click of a mouse. "Make the clients life even easier?!", you ask. YES!
I was able to improve the client experience with the return of a single click web address.
Initially I had built a submit event that returned the web address to a list a breweries in any given state in the U.S.A. However, initially what I was able to return was an address but it was not hyperlinked, which wasn't bad but it wasn't great either. Because it is the developer's job to create the best client experience within a given scope, within my function that made it possible to submit a form, I created the beloved tag.
Below is a function that allows a user to submit a state, Texas, California, etc, and return a hyperlink to a website of a brewery located within that particular state.
function submitState(breweryUrl){
const div = document.createElement('div')
I already had the submit event created and appending to the DOM but without the tag, I wasn't getting back what I needed and that is a hyperlink. A functional
hyperlink cannot exist without an tag in Javascript.
- item 1 let aTag = document.createElement('a')
let btn = document.createElement('button')
btn.addEventListener('click', handleDelete)
btn.textContent = 'x'
Once I created the the tag element, I needed to make the textContent of the aTag, dynamic because I would be returning any number of web addresses from many different breweries.
- item 2
aTag.textContent =
${breweryUrl}
Then, in order for the tag to function properly, an href (hyperlink reference) element needed to be created and appended to the div that housed the Url Container.
- item 3 aTag.href = breweryUrl
Once all that was done, then I used appendChild to append the aTag to the div since the tag would be a child to the parent element, div.
- item 4 div.appendChild(aTag) div.appendChild(btn)
Last but not least, using a querySelector to find the Url Container, I was able to then append the div that contains the tag to the div with an id of url_conatiner.
- item 5 document.querySelector('#url_container').append(div) }
After that, returning a hyperlink to the web sites of various breweries was then possible and the brewery locating world was a better place.
This is my first blog and I'm new to the community. I would greatly appreciate any feedback/constructive criticism so that I can better participate and contribute to the culture.
CHEERS!
Ruben Salazar
Top comments (0)