JavaScript动态注入：实现可点击的返回顶部功能

<p><a href="javascript:void(0);" id="return-to-top"><i class="fa fa-chevron-up"></i></a></p>

// 1. 创建包裹元素 <p>
const pElement = document.createElement('p');

// 2. 创建链接元素 <a>
const aElement = document.createElement('a');
aElement.href = 'javascript:void(0);'; // 避免页面跳转
aElement.id = 'return-to-top';

// 3. 创建图标元素 <i>
const iElement = document.createElement('i');
iElement.className = 'fa fa-chevron-up'; // 假设已引入Font Awesome

// 4. 将图标元素添加到链接元素中
aElement.appendChild(iElement);

// 5. 将链接元素添加到包裹元素中
pElement.appendChild(aElement);

// 6. 将整个结构添加到页面的某个位置，例如body的末尾
document.body.appendChild(pElement);

// 获取刚刚注入的按钮元素
let btn = document.getElementById('return-to-top');

// 为按钮添加点击事件监听器
btn.addEventListener('click', function() {
    // 滚动页面到顶部
    window.scroll(0, 0);
    // 或者使用更现代、支持平滑滚动的API
    // window.scrollTo({
    //     top: 0,
    //     behavior: 'smooth'
    // });
});

document.addEventListener('DOMContentLoaded', function() {
    // 1. 创建包裹元素 <p>
    const pElement = document.createElement('p');

    // 2. 创建链接元素 <a>
    const aElement = document.createElement('a');
    aElement.href = 'javascript:void(0);';
    aElement.id = 'return-to-top';

    // 3. 创建图标元素 <i>
    const iElement = document.createElement('i');
    iElement.className = 'fa fa-chevron-up'; // 确保页面已加载Font Awesome CSS

    // 4. 组合元素
    aElement.appendChild(iElement);
    pElement.appendChild(aElement);

    // 5. 将元素添加到页面
    // 建议添加到body的末尾，或某个特定的容器
    document.body.appendChild(pElement);

    // 6. 获取按钮并绑定事件
    let btn = document.getElementById('return-to-top');
    btn.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth' // 实现平滑滚动
        });
    });

    // 7. (可选) 为按钮添加样式，使其在页面上可见且定位准确
    // 注意：这里的样式是直接通过JS设置的，实际项目中通常通过CSS文件或注入<style>标签
    btn.style.position = 'fixed';
    btn.style.bottom = '20px';
    btn.style.right = '20px';
    btn.style.zIndex = '9999';
    btn.style.display = 'none'; // 初始隐藏，滚动后显示
    btn.style.width = '40px';
    btn.style.height = '40px';
    btn.style.borderRadius = '50%';
    btn.style.backgroundColor = '#007bff';
    btn.style.color = '#fff';
    btn.style.textAlign = 'center';
    btn.style.lineHeight = '40px';
    btn.style.fontSize = '20px';
    btn.style.cursor = 'pointer';
    btn.style.textDecoration = 'none'; // 移除下划线
    btn.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';

    // 8. (可选) 根据滚动位置显示/隐藏按钮
    window.addEventListener('scroll', function() {
        if (window.scrollY > 200) { // 当页面滚动超过200px时显示
            btn.style.display = 'block';
        } else {
            btn.style.display = 'none';
        }
    });
});