如何在按钮点击执行输出前隐藏div的边框线

你现在遇到的边框提前显示的问题，来自两个代码错误：

• HTML标签嵌套错误：</head>结束标签错位写在了</body>之后，不符合HTML语法规范
• 边框挂载节点错误：你把要展示内容的边框加在了outputDiv外的无关空div上，这个空div没有内容控制逻辑，加载后就会直接显示边框，真正用来放生成内容的outputDiv反而没有绑定边框样式

修改方案如下：
你只需要调整边框的挂载节点，给outputDiv加默认隐藏的样式，点击按钮生成内容时同步显示边框即可，修改后的完整代码如下：

<html>
    <head>
        <title>Old MacDonald Verse</title>
        <script type="text/javascript">
            function OldMacVerse(animal,sound) {
                const outputDiv = document.getElementById('outputDiv');
                outputDiv.innerHTML=
                '<p>Old Macdonald had a farm, E-I-E-I-O.<br>' +
                'And on that farm he had a ' + animal + ', E-I-E-I-O. <br>' +
                'With a ' + sound + '-' + sound + ' here, and a ' + sound + '-' + sound +
                ' there, <br>' + ' here a ' + sound + ', there a ' + sound + 
                ', everywhere a ' + sound + '-' + sound + '.<br>' + 
                'Old Macdonald had a farm, E-I-E-I-O.</p>';
                // 生成内容后显示边框
                outputDiv.style.display = 'block';                                                                          
            }
        </script>
    </head>
    <body> 
        <div style= "border: solid; margin: auto; width:350px; text-align: center;">
            <h1>Old MacDonald Verse</h1>
            <input type="button" value="Pig Verse" onclick="OldMacVerse('pig','oink');">
            <input type="button" value="Sheep Verse" onclick="OldMacVerse('sheep','baa');">
            <input type="button" value="Cow Verse" onclick="OldMacVerse('cow', 'moo');">
        </div>
        <br>
        <!-- 把边框直接加到outputDiv上，默认隐藏 -->
        <div id="outputDiv" style="display: none; border: groove; margin: auto; width: 350px; text-align: center;">
        </div>
    </body>
</html>

修改点说明：

• 修正了</head>标签的位置，符合HTML语法规范
• 删除了原来多余的带groove边框的空div，把边框样式直接加到outputDiv上，同时增加display: none默认隐藏
• JS逻辑中获取outputDiv节点，内容赋值完成后设置display: block显示边框和内容

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