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

木羊羽

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

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[i].appendChild(download_button);
    }
    // bolds[0].appendChild(download_button);
    // bolds[1].appendChild(download_button);
};

王一之

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

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

你插入的download_button一直是同一个

木羊羽

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

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

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

王一之

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

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

王一之

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

修改了一下

1. // ==UserScript==
   
2. // @name         创建一个按钮
   
3. // @namespace    http://tampermonkey.net/
   
4. // @version      0.1
   
5. // @description  创建一个按钮
   
6. // @author       木羊羽
   
7. // @match        http://www.btbtt.me/*
   
8. // @run-at       document-end
   
9. // @grant        none
   
10. // ==/UserScript==
    
11. 
    
12. 
    
13. window.onload = function (){
    
14.     bolds = document.querySelectorAll('.bold');
    
15.     let i = bolds.length;
    
16.     while (i--) {
    
17.         let download_button = document.createElement('button');
    
18. download_button.textContent = ' 下载附件';
    
19. download_button.style.color = '#fff';
    
20. download_button.style.backgroundColor = '#3280fc';
    
21. download_button.style.padding = 'inherit';
    
22. download_button.style.fontSize = 'inherit';
    
23. download_button.style.lineHeight = '1.53846154';
    
24. download_button.style.textAlign = 'center';
    
25. download_button.style.verticalAlign = 'Middle';
    
26. download_button.style.border = '1px solid transparent';
    
27. download_button.style.border = '1px solid transparent';
    
28. download_button.style.borderRadius = '4px';
    
29. download_button.style.cursor = 'pointer';
    
30.         bolds[i].appendChild(download_button);
    
31.     }
    
32.     // bolds[0].appendChild(download_button);
    
33.     // bolds[1].appendChild(download_button);
    
34. };

复制代码

陈公子的话

创建按钮放入循环里面

木羊羽

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

爱你