使用 JS 操作 DOM。添加按钮和链接

Question

这个脚本应该添加一个按钮，按钮需要链接到 xyz.com。我能够显示按钮，但它没有链接。这是我所拥有的：

<script type="text/javascript">
var btn = document.createElement('button');
btn.innerText = 'Watch Now';
document.getElementById('buttoncontainer').appendChild(btn);
document.getElementById("buttoncontainer").href = "http://www.cnn.com/";
</script>

谢谢乌迪

Answer 1

如果您希望导航

button，则必须添加比现有元素多一点的内容button因为元素没有href属性，默认情况下不会生成导航。您需要为此设置一个click事件处理回调函数。

另外，不要使用.innerText因为它是非标准的。请改用.textContent。

<div id="buttonContainer">
</div>
<script>
  var container = document.getElementById('buttonContainer');
  var btn = document.createElement('button');
  btn.textContent = 'Watch Now';
  
  // Buttons don't have an href. You need to set up a click event handler
  btn.addEventListener("click", function(){
    location = "https://cnn.com"; // Navigate to new page
  });
  
  // Add button to page
  container.appendChild(btn);
</script>

如果你想要一个超链接(<a>(，那么你可以使用href：

<div id="buttonContainer">
</div>
<script>
  var container = document.getElementById('buttonContainer');
  var a = document.createElement('a');
  a.textContent = 'Watch Now';
  a.href = "https://cnn.com";
  
  // Add hyperlink to page
  container.appendChild(a);
</script>

注意：

由于安全限制，这些实际上都不会在堆栈溢出代码片段环境中将您导航到CNN，但代码将在您自己的环境中工作。