当在另一个锚中动态创建锚时，为什么href不起作用？

Question

场景1：

我的锚点带有onclick="return false;" 然后在其中动态添加另一个锚。 当父锚具有onclick="return false;"时， href无效onclick="return false;" 但是当我删除该onclick时，它工作正常。

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head></head>
  <body>
    <a id="link1" onclick="return false;"></a>
    <script>
       var link = document.getElementById('link1')
       var newLink = document.createElement('a')
       newLink.setAttribute('href','https://wwww.google.com')
       newLink.innerHTML="google"
       //link.insertAdjacentElement('beforeend', newLink)
       link.appendChild(newLink)
    </script>
 </body>
</html>

方案2：

我只有两个锚，其父锚具有onclick作为return false 。 但在这种情况下，内部锚点的href可以正常工作。

<a onclick="return false;"><a href="https://www.google.com">google</a></a>

所以问题是，当我在onclick作为return false另一个锚点内部动态添加锚点时，内部锚点的href无法正常工作，但在静态创建它们时可以正常工作。

有人可以帮我了解这种行为吗？

Answer 1

浏览器不会像预期的那样解析嵌套，但是JavaScript设法嵌入了嵌套。

嵌套a元素被禁止在HTML语法。 HTML规范没有说明原因； 他们只是强调规则。

从实际的角度来看，浏览器会在其解析规则中有效地实施此限制，因此与许多其他问题不同，违反规范将不起作用。 解析器有效地将open元素内的<a>开始标签视为在开始新元素之前隐式终止open元素。

因此，如果您编写<a href=foo>foo <a href=bar>bar</a> zap</a> ，则不会获得嵌套元素。 浏览器会将其解析为<a href=foo>foo</a> <a href=bar>bar</a> zap ，即两个连续的链接，后跟一些纯文本。

当在另一个锚中动态创建锚时，为什么href不起作用？

问题描述

1 个解决方案

解决方案1
2 2018-09-19 08:16:19

当在另一个锚中动态创建锚时，为什么href不起作用？

问题描述

1 个解决方案

解决方案1 2 2018-09-19 08:16:19

解决方案1
2 2018-09-19 08:16:19