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;
  }
}

anybuddy可以解释一下。为什么

Answer 1

innerHTML是一个字符串属性，因此将字符串作为值。你的link是一个元素对象，因此它被隐式转换为一个带有toString()方法的字符串，它确实返回了URL。

以下两种方法可以解决这个问题：

这两种解决方案都要求您通过运行links_container.innerHTML = ''

清除容器循环之前的容器

使用links_container.appendChild(link)

附加元素

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

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

Answer 2

尝试调用appendChild而不是设置innerHTML。 link对象是一个元素，而不是HTML字符串。

即。尝试改变：

links_container.innerHTML = links;

到

links_container.appendChild(link);

function createLinks() {
  var links_container = document.getElementsByClassName('pagination-links')[0];

  // clear out previous html
  links_container.innerHTML = "";
  
  for (i = 1; i <= 5; i++) {
    var link = document.createElement('a');
    var txt = document.createTextNode('Page ' + i + " ");
    link.setAttribute("href", "#");
    link.appendChild(txt);
    // append link to container
    links_container.appendChild(link);
  }
}

createLinks();

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

使用innerHTML的解决方案：

links_container.innerHTML += link.outerHTML;

或

links_container.innerHTML += "<a href='#'>Page " + i + " </a>"

function createLinks() {
  var links_container = document.getElementsByClassName('pagination-links')[0];

  // clear out previous html
  links_container.innerHTML = "";

  for (i = 1; i <= 5; i++) {
    var link = document.createElement('a');
    var txt = document.createTextNode('Page ' + i + " ");
    link.setAttribute("href", "#");
    link.appendChild(txt);
    // add link
    links_container.innerHTML += link.outerHTML;
    
    // or you can use this instead of the above code
    //links_container.innerHTML += "<a href='#'>Page " + i + " </a>";
  }
}

createLinks();

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

Answer 3

替换此行

links_container.innerHTML = links;

带

links_container.innerHTML = link;

因为那里没有任何links变量。

InnerHTML不输出锚元素，而是输出当前的pg url。为什么？

3 个答案: