Dynamically create element but use <a href> 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. — anon
– anon, Commented Apr 29, 2015 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
– Harry, Commented Apr 30, 2015 at 4: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
– Maina Mailu, Commented Apr 30, 2015 at 6: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
– Harry, Commented Apr 30, 2015 at 6:37

Brijesh Bhatt · Accepted Answer · 2015-04-29 12:13:11Z

3

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>

answered Apr 29, 2015 at 12:13

Brijesh Bhatt

3,8303 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:58:28Z

0

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>

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Apr 29, 2015 at 12:20

Mehrzad Chehraz

5,1572 gold badges19 silver badges28 bronze badges

Comments

ImreNagy · Accepted Answer · 2015-04-29 12:24:08Z

0

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.

answered Apr 29, 2015 at 12:24

ImreNagy

5112 silver badges10 bronze badges

Collectives™ on Stack Overflow

Dynamically create element but use <a href> instead of a button onClick

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related