如何使用JavaScript在>768px断点通过addElement添加HTML元素？

当然可行啦！这其实是前端开发里很常见的响应式DOM操作需求，我来一步步教你怎么实现～

你提到的addElement应该是笔误啦，原生JavaScript中创建DOM元素用的是document.createElement()方法，创建完成后再通过appendChild()或者append()等方法把元素添加到页面中。

咱们可以拆成几个核心环节来做：

1. 监听屏幕尺寸变化 #

需要监听窗口的resize事件，这样每次屏幕大小改变时都能触发判断逻辑；另外页面首次加载时也要执行一次判断，避免刷新后尺寸已经符合条件但元素没出现。

2. 编写判断与元素创建逻辑 #

• 先判断当前窗口宽度是否大于768px（你的平板/桌面断点）
• 为了避免重复创建元素，建议设置一个标记变量，记录元素是否已经添加到页面
• 创建段落和输入框元素，设置它们的内容、属性和样式
• 将创建好的元素添加到页面的指定容器中
• 可选：如果需要在屏幕缩小到768px以下时移除元素，也可以在else分支里处理移除逻辑

下面是一个可直接运行的完整示例，你可以复制到HTML文件里测试：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式添加元素示例</title>
    <style>
        /* 给动态元素加一点点样式，看起来更清晰 */
        .dynamic-content {
            margin: 15px 0;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 4px;
        }
        .dynamic-content input {
            padding: 6px;
            margin-top: 8px;
        }
    </style>
</head>
<body>
    <!-- 动态元素会被添加到这个容器里 -->
    <div id="content-container"></div>

    <script>
        // 获取存放动态元素的容器
        const container = document.getElementById('content-container');
        // 标记元素是否已添加，防止重复创建
        let isElementsAdded = false;

        // 定义核心处理函数
        function checkAndAddElements() {
            const windowWidth = window.innerWidth;
            // 当屏幕宽度大于768px且元素未添加时执行
            if (windowWidth > 768 && !isElementsAdded) {
                // 创建段落元素
                const paragraph = document.createElement('p');
                paragraph.textContent = '这是屏幕尺寸大于768px时动态生成的段落～';
                paragraph.classList.add('dynamic-content');

                // 创建输入框元素
                const input = document.createElement('input');
                input.type = 'text';
                input.placeholder = '这是动态生成的输入框';
                input.classList.add('dynamic-content');

                // 把元素添加到容器中
                container.appendChild(paragraph);
                container.appendChild(input);

                // 更新标记，避免重复添加
                isElementsAdded = true;
            } else if (windowWidth <= 768 && isElementsAdded) {
                // 可选：屏幕缩小时移除动态元素
                const dynamicElements = document.querySelectorAll('.dynamic-content');
                dynamicElements.forEach(el => el.remove());
                isElementsAdded = false;
            }
        }

        // 页面加载完成后先执行一次判断
        window.addEventListener('load', checkAndAddElements);
        // 监听窗口大小变化，实时触发判断
        window.addEventListener('resize', checkAndAddElements);
    </script>
</body>
</html>

• isElementsAdded变量很重要：如果没有这个标记，每次窗口 resize 时都会重复创建元素，页面会变得混乱
• 断点值768px是行业常用的平板断点，你可以根据自己的需求修改这个数值
• 给动态元素添加类名（比如示例里的dynamic-content），方便用CSS统一控制样式
• 如果不需要在屏幕缩小时移除元素，只需要把else分支的代码删掉即可

内容的提问来源于stack exchange，提问作者Becky Beck