Dynamically create element but use instead of a button onClick

Question

I intend to re-use HTML DOM's create element method described in W3Schools for my form.

function myFunction() {
  var btn = document.createElement("BUTTON");
  var t = document.createTextNode("CLICK ME");
  btn.appendChild(t);
  document.body.appendChild(btn);
}

<p>Click the button to make a BUTTON element with text.</p>

<button onclick="myFunction()">Try it</button>

In the example above, a button is used to create a HTML element. How can I change this to use a href link (an <a> tag) instead of a button's click event?

Change `button` to `a`, and keep everything inside the same. Probably. It's hard to know what you want when you don't show us the code _in the question itself_, as required by the StackOverflow guidelines. — Nic, Apr 29 '15 at 12:18
It is always better to add your reference code into the question (even if it is from another website) along with a link to the site from where it was picked up. Questions where the critical piece of information lies in an external site tend to lose their value when the linked page becomes unavailable in future. Also, avoid adding tags that are not necessary for the question (jQuery in this case) because it causes confusion on whether you are looking for a plain JS answer or a jQuery based one. — Harry, Apr 30 '15 at 04:52
@Harry what do i do incase i have another question related to this particular one? Do i raise it as a new question or should i edit the original question? — Maina Mailu, Apr 30 '15 at 06:31
@Maina: If it is a clarification then you can ask the person who had answered it (through comments). If not, it is better to ask a separate question. You can add a link to this question in the new one if the questions are related. — Harry, Apr 30 '15 at 06:37

score 3 · Answer 1 · answered Apr 29 '15 at 12:13

You can write like this in the same example you refered W3Schools HTML DOM as:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to make a BUTTON element with text.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var btn = document.createElement("a");
btn.innerHTML="click";
    var t = btn.setAttribute("href","https://www.google.com");
btn.setAttribute("target","_blank");
    document.body.appendChild(btn);
}
</script>

</body>
</html>

score 0 · Accepted Answer · edited May 23 '17 at 11:58

Change the tag to anchor, set href to "javascript:void(0)" in order to prevent browser to perform navigation.

<!DOCTYPE html>
<html>
<body>

<p>Click the link to make a BUTTON element with text.</p>

<a href="javascript:void(0)" onclick= "myFunction()" > Try it</a>

<script>
function myFunction() {
            var btn = document.createElement("BUTTON");
            var t = document.createTextNode("CLICK ME");
            btn.appendChild(t);
            document.body.appendChild(btn);
        }
</script>

</body>
</html>

score 0 · Answer 3 · answered Apr 29 '15 at 12:24

Do I understand you correctly that you want to use the tag instead of the element for the element that fires the event?

Basically you could do this just like in the example:

<a onclick="myFunction()">Try it</a>

And you could also give the -tag a href attribute. But here you already see the problem of this "solution". The onclick-function and the href-link will both be fired and you surely will have unwanted behaviour.

I also assume that you want it just to be styled as any link on your page and not even use the href atttribute. Then using the example above would work. Personally I would still prefer to use a -tag instead and style it myself as the tag should be for links only.

Dynamically create element but use instead of a button onClick

3 Answers3

Linked