How to add anchor link to Javascript output?

Question

I'm trying to call up a message on my page using only javascript, and then display it by using the div id. I've got the message displayed, but I want to add an anchor link in the message, but what I'm trying to do isn't working.

What's the way to do this?

window.onload = function() {
  var el = document.getElementById('head-msg');
  el.textContent = 'Our payment processor is currently having an issue processing payments. Please come back to make your purchase. For additional assistance, contact Customer Service' + ' <a class="btn btn-sm btn-danger" href="#">Contact Us</a>';
}

#head-msg {
  background-color: orange;
  padding: 5px;
  color: #ffffff;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

<div class="container p-5">
  <div class="row">
    <div class="col-sm-12">
      <h1>Message Here</h1>
      <div id="head-msg"></div>
    </div>
  </div>
</div>

Possible duplicate of [nodeValue vs innerHTML and textContent. How to choose?](https://stackoverflow.com/questions/21311299/nodevalue-vs-innerhtml-and-textcontent-how-to-choose) — Taplar, Jan 03 '19 at 20:51

score 0 · Answer 1 · answered Jan 03 '19 at 22:37

Try this one:

window.onload = function() {
  var el = document.getElementById('head-msg');
  el.innerHTML += 'Our payment processor is currently having an issue processing payments. Please come back to make your purchase. For additional assistance, contact Customer Service ';

  var a = document.createElement('a');
  var linkText = document.createTextNode('Contact Us');

  a.appendChild(linkText);
  a.href = '#';
  a.className = 'btn btn-sm btn-danger';

  el.appendChild(a);
}

How to add anchor link to Javascript output?

1 Answers1