javascript - InnerHTML 不输出 anchor 元素，而是输出当前 pg url。为什么？

Question

在下面的代码中，links_container.innerHTML = links;输出http://localhost/pagination/js-pagination.html#而不是<a href='#'>Page 1</a> .

HTML

<div class="pagination-links"></div>

JS

function createLinks() {
        var links_container = document.getElementsByClassName('pagination-links')[0];

for(i=1; i<=5; i++){
    var link = document.createElement('a');
    var txt = document.createTextNode('Page ' + i + " ");
    link.setAttribute("href", "#");
    link.appendChild(txt);
    links_container.innerHTML = link;
  }
}

哪位大佬能解释一下吗？为什么

Answer 1

innerHTML 是一个字符串属性，因此采用字符串作为值。您的 link 是一个元素对象，因此它通过其 toString() 方法隐式转换为字符串，该方法确实返回 URL。

以下是解决此问题的两种方法:

这两种解决方案都要求您在 for 循环之前运行links_container.innerHTML = ''来清除容器

1. 使用 links_container.appendChild(link) 附加元素

2. 使用元素对象的outerHTML:links_container.innerHTML += link.outerHTML

第一个选项更合适，因为它将您创建的 DOM 元素直接插入到 DOM 中。第二个选项将 DOM 元素转换为字符串，然后强制浏览器从该 HTML 创建一个新的 DOM 元素。如果元素中添加了任何事件监听器，它们就会丢失。