点击按钮实现DOM元素存在性判断及动态增删的技术实现咨询

嘿，我来帮你梳理下这段代码的问题，以及怎么优化它～

首先，你的代码没法正确实现“点击切换元素显示/移除”的需求，主要有几个核心问题：

问题1：DOM存在性判断的时机错误 #

你在页面初始化时就执行了const divPresent = document.getElementById('div1')，此时div1还没被添加到DOM里，所以divPresent的值会一直是null。之后每次点击按钮，判断条件if (divPresent == null)永远为真，只会执行添加元素的逻辑，没法移除已经添加的元素。

问题2：重复设置元素ID导致查找失败 #

你给div1连续设置了两次ID：

div1.id = 'div1';
div1.id = 'special1';

这会覆盖第一次的ID，最终div1的ID是special1，所以document.getElementById('div1')永远找不到这个元素，即使它被添加到DOM里。

问题3：重复绑定点击事件 #

按钮上已经通过onclick="run1()"绑定了点击事件，又用addEventListener绑定了一次，这会导致点击一次按钮触发两次run1函数，可能出现元素刚添加就被移除的诡异情况。

修正后的代码 #

HTML（移除冗余的onclick属性） #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Toggle Element Demo</title>
</head>
<body>
<button id="btn-1">show / remove</button>
<script type="text/javascript" src="basic.js"></script>
</body>
</html>

JavaScript（修复判断逻辑，清理冗余代码） #

// 创建目标元素，避免重复设置ID
let div1 = document.createElement('div');
div1.className = 'exer-text';
div1.id = 'special1'; // 只保留一个唯一ID，不需要可以直接去掉

let bold1 = document.createElement('b');
bold1.innerText = '2.';

let par1 = document.createElement('p');
par1.innerText = 'The answer to the question is ';
par1.append(bold1);

div1.append(par1);

function run1() {
    // 每次点击时实时检查元素是否在DOM中
    if (document.body.contains(div1)) {
        // 元素存在则移除
        document.body.removeChild(div1);
    } else {
        // 元素不存在则添加
        document.body.appendChild(div1);
    }
}

// 只绑定一次点击事件
document.getElementById('btn-1').addEventListener('click', run1);

额外优化思路 #

如果你的场景不需要真的添加/移除DOM元素（比如需要保留元素的状态，比如输入内容），可以用切换display属性的方式实现显示/隐藏，这种方式更高效：

// 初始化时就把元素添加到DOM，默认隐藏
div1.style.display = 'none';
document.body.appendChild(div1);

function run1() {
    // 切换显示状态
    div1.style.display = div1.style.display === 'none' ? 'block' : 'none';
}

另外，也可以用classList.toggle()来切换CSS类，通过类来控制显示隐藏，这样样式和逻辑分离，更符合前端最佳实践：

/* 在CSS中定义隐藏类 */
.hidden {
    display: none;
}

// 初始化添加元素并加上隐藏类
div1.classList.add('hidden');
document.body.appendChild(div1);

function run1() {
    // 切换隐藏类
    div1.classList.toggle('hidden');
}

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