Question

I intend to re-use HTML DOM's create element method described in W3Schools。

＆＃13;

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

＆＃13;

<p>Click the button to make a BUTTON element with text.</p>

<button onclick="myFunction()">Try it</button>

＆＃13;

在上面的示例中，button用于创建HTML元素。如何更改此设置以使用href链接（<a>标记）而不是按钮的点击事件？

Answer 1

你可以在你提到W3Schools HTML DOM的同一个例子中这样写：

<!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>

Answer 2

将标记更改为锚点，将href设置为"javascript:void(0)"，以防止浏览器执行导航。

<!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>

Answer 3

我是否理解您是否要使用标记而不是激活事件的元素的元素？

基本上你可以像在例子中那样做：

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

你也可以给-tag一个href属性。但在这里你已经看到了这个“解决方案”的问题。 onclick-function和href-link都会被触发，你肯定会有不良行为。

我还假设您希望将其设置为页面上的任何链接，甚至不使用href atttribute。然后使用上面的例子就行了。就个人而言，我仍然更喜欢使用-tag并自己设置样式，因为标签应仅用于链接。

动态创建元素，但为我的表单使用<a href=""> instead of a button onClick

3 个答案: