CODEWITHSUNDEEP
javascripthtmlhyperlink
The Special Noob
The Special Noob

Reputation: 11

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

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?

Upvotes: 0

Views: 7812

Answers (3)

chrisjonesDSGN
chrisjonesDSGN

Reputation: 21

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.

Upvotes: 2

Sercan
Sercan

Reputation: 5081

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>

Upvotes: 0

Lychas
Lychas

Reputation: 353

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

Upvotes: 0

Related Questions