How do I add a hyperlink in my in my text using Java & inner HTML?-CodePudding

I'm really new to javascript and I tried googling but it did not help. ( Please downvote this without giving a reason )

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:

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

<script>
      _$ = 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'
             //         );
    </script>

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?

Again, if you think this is a bad question or just no enough just don't downvote without giving a reason.

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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

HTML:

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

JavaScript:

// 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)

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

-cheers