论坛 › 问题反馈 › 向网页添加按钮为什么只有一个？？

木羊羽 发表于 2021-4-5 17:23:20

向网页添加按钮为什么只有一个？？

!(data/attachment/forum/202104/05/172251tyw8zmxinn26mmpx.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300)

向网页添加按钮为什么只有一个？？

```
https://www.btbtt.me/thread-index-fid-950-tid-4576574.htm
```

我用for或者while循环都不行，结果都只有最后一个被成功添加按钮，但是如果不使用循环（注释代码）就能每个都可以添加按钮。


```
// ==UserScript==
// @name         创建一个按钮
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description创建一个按钮
// @author       木羊羽
// @match      www.btbtt.me/*
// @run-at       document-end
// @grant      none
// ==/UserScript==

let download_button = document.createElement('button');
download_button.textContent = ' 下载附件';
download_button.style.color = '#fff';
download_button.style.backgroundColor = '#3280fc';
download_button.style.padding = 'inherit';
download_button.style.fontSize = 'inherit';
download_button.style.lineHeight = '1.53846154';
download_button.style.textAlign = 'center';
download_button.style.verticalAlign = 'Middle';
download_button.style.border = '1px solid transparent';
download_button.style.border = '1px solid transparent';
download_button.style.borderRadius = '4px';
download_button.style.cursor = 'pointer';

window.onload = function (){
    bolds = document.querySelectorAll('.bold');
    let i = bolds.length;
    while (i--) {
      bolds.appendChild(download_button);
    }
    // bolds.appendChild(download_button);
    // bolds.appendChild(download_button);
};
```

王一之 发表于 2021-4-5 23:06:03

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild

Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

你插入的download_button一直是同一个

木羊羽 发表于 2021-4-6 08:39:43

王一之 发表于 2021-4-5 23:06
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild

Node.appendChild() 方法将一个节点 ...

大佬 那请问如何向网页添加多个按钮呢？

王一之 发表于 2021-4-6 09:13:40

木羊羽 发表于 2021-4-6 08:39
大佬 那请问如何向网页添加多个按钮呢？

你把let download_button = document.createElement('button');这些放循环内创建不就好了

王一之 发表于 2021-4-6 09:16:32

木羊羽 发表于 2021-4-6 08:39
大佬 那请问如何向网页添加多个按钮呢？

修改了一下

// ==UserScript==
// @name         创建一个按钮
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description创建一个按钮
// @author       木羊羽
// @match      http://www.btbtt.me/*
// @run-at       document-end
// @grant      none
// ==/UserScript==


window.onload = function (){
    bolds = document.querySelectorAll('.bold');
    let i = bolds.length;
    while (i--) {
      let download_button = document.createElement('button');
download_button.textContent = ' 下载附件';
download_button.style.color = '#fff';
download_button.style.backgroundColor = '#3280fc';
download_button.style.padding = 'inherit';
download_button.style.fontSize = 'inherit';
download_button.style.lineHeight = '1.53846154';
download_button.style.textAlign = 'center';
download_button.style.verticalAlign = 'Middle';
download_button.style.border = '1px solid transparent';
download_button.style.border = '1px solid transparent';
download_button.style.borderRadius = '4px';
download_button.style.cursor = 'pointer';
      bolds.appendChild(download_button);
    }
    // bolds.appendChild(download_button);
    // bolds.appendChild(download_button);
};

陈公子的话 发表于 2021-4-6 12:12:31

创建按钮放入循环里面

木羊羽 发表于 2021-4-6 12:28:44

王一之 发表于 2021-4-6 09:16
修改了一下

爱你{:4_110:}

查看完整版本: 向网页添加按钮为什么只有一个？？