How do I add a hyperlink in my text using JavaScript?

Question

I'm really new to JS and I tried googling but it did not help. All I'm trying to do is add the medium Post link into my text as a hyperlink. I'm pretty sure I'm half way there but I can't figure it out:

_$ = document.querySelector.bind(document) ;
var AppendLinkHere = _$("body") // <- put in here some CSS selector that'll be more to your needs
var a = document.createElement('a');
a.text = "Medium Post";
a.href = "https://medium.com/@FundsFi/fundsfi-presale-terms-are-here-whitelisting-requirements-fc798d85b284";

// AppendLinkHere.appendChild(a)
// a.title = 'Well well ... 
// a.setAttribute('title', 'Well well that\'s a link');

<s.TextDescription style={{ textAlign: "center", color: "var(--primary-text)", }}> 
  blah blah blah blah blah blah blah blah blah blah  Medium Post. 
</s.TextDescription>

All I want to do is make it so that when people click on the word Medium Post it takes them to a new tab with the medium link. Also, I got the code from this post while searching for an answer: How do I create a link using javascript? And then I realized that I need to added a CSS selector which I can't figure out how to do. So far I've found this post about: How do you add CSS with Javascript?

Welcome to SO. Asking not to downvote is pointless. You might find reading the site [help section](https://stackoverflow.com/help) useful when it comes to [asking a good question](https://stackoverflow.com/help/how-to-ask), and this [question checklist](https://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist). Code that you've worked on to solve the problem should include a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example), and be included in your question. — Louys Patrice Bessette, Feb 10 '22 at 01:33
Incidentally, [Java](https://en.wikipedia.org/wiki/Java_(programming_language)) is different from [JavaScript](https://en.wikipedia.org/wiki/JavaScript). — showdev, Feb 10 '22 at 02:23
Adding css selector is not the same as adding CSS see https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector — Jon P, Feb 10 '22 at 03:30
Why did you choose code with a syntax error from an answer with 5 votes when there is an accepted answer which will do what you need with 257 votes? — Jon P, Feb 10 '22 at 04:03

score 2 · Answer 1 · edited Feb 10 '22 at 05:19

If you're wanting it to be javascript this might help.

// create anchor link element
let link = document.createElement("a")

// Create txt
let txt = document.createTextNode("Medium Post")

//append txt to anchor element
link.appendChild(txt)

// set the title
link.title ="Medium Post";

// set the href property
link.href = "https://www.medium.com";

// get text to add link to
let el = document.getElementById("p")

// append the link to the el id = "p"
el.appendChild(link)

<div class="textDescription">
  <p id="p">blah blah blah blah blah blah blah blah blah blah </p>
</div>

Hope this helps, let me know if you have any questions.

score 0 · Answer 2 · answered Feb 10 '22 at 01:28

From what I understand you want an HTML page to include a text that a user can click to go to a new lab that has your link, well there is a lot of ways you can do this including writing in in HTML code instead of javascript so it'll be <a href="link here" target="_blank">medium</a> and that will show a hyperlink text on the page that when clicked would take you to a new page or if you want to use javascript you can use the document.querySelector("id here").innerHTML = '<a href="link here" target="_blank">medium</a>'; and that would allow you to show the link inside the page and link on an event if set up with document.addEventListener but keep in mind that it will remove all the code, text and tags inside the selected tag and put the link. Sorry if I got something wrong, I'm still kinda new :D

score 0 · Answer 3 · answered Feb 10 '22 at 01:36

In the solution below, the <div> element with an id value of link is added to the <a> element when the page's load event occurs.

let linkElement = document.getElementById('link');
const targetAddress = "https://medium.com/@FundsFi/fundsfi-presale-terms-are-here-whitelisting-requirements-fc798d85b284";

/* The load event is triggered when the page loads. */
window.onload = function() {
  /* The new <a> element is created. */
  var newLinkElement = document.createElement('a');
  
  /* A new text node is created. */
  var newContent = document.createTextNode("Medium Post");
  
  /* The text node is added to the <a> element. */
  newLinkElement.appendChild(newContent);
  
  /* The class attribute of the <a> element is assigned the value "aElementStyle". */
  newLinkElement.setAttribute('class', 'aElementStyle');
  
  /* The targetAddress variable content is assigned to the href attribute of the <a> element. */
  newLinkElement.setAttribute('href', targetAddress);
  
  /* The <a> element is linked as a child to the <div> element whose id value is "link". */
  linkElement.appendChild(newLinkElement);
}

.aElementStyle {
  color: white;
  background-color: black;
  text-decoration: none;
}

<body>
  <div id="link"></div>
</body>

How do I add a hyperlink in my text using JavaScript?

3 Answers3