请求调整JavaScript中cookieinfo-close div与span元素的顺序

没问题，我来帮你搞定这个元素顺序调整的需求。首先，咱们需要定位到这个cookieinfo脚本里构建提示栏HTML的部分——你提供的代码片段没完全展示这部分，但根据脚本的结构，这部分逻辑应该在insert方法里（或者专门的HTML构建函数）。

核心修改思路 #

你需要找到生成id="cookieinfo-close"的div元素和它后面的span元素的代码段，交换两者的生成/拼接顺序，让span先被渲染，再渲染close按钮的div。

具体代码修改示例 #

假设脚本里构建这部分HTML的原代码是这样的：

// 原代码：先创建关闭按钮div，再创建文本span
var closeBtn = '<div id="cookieinfo-close" style="position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer;color:' + this.options.fg + ';font-size:18px;">' + this.options.closeText + '</div>';
var msgSpan = '<span style="display:inline-block;padding:8px 60px 8px 15px;line-height:1.4;">' + this.options.message + '</span>';

// 拼接HTML时，closeBtn在前，msgSpan在后
var cookieBar = '<div id="cookieinfo" style="position:fixed;' + this.options.position + ':0;left:0;width:100%;height:' + this.options.height + ';min-height:' + this.options.minHeight + ';background:' + this.options.bg + ';color:' + this.options.fg + ';font-size:' + this.options.fontSize + ';font-family:' + this.options.fontFamily + ';z-index:' + (this.options.zindex + 1) + ';text-align:' + this.options.textAlign + ';">' + closeBtn + msgSpan + '</div>';

把它改成下面这样，就能实现span在前、div在后的效果：

// 修改后：先创建文本span，再创建关闭按钮div
var msgSpan = '<span style="display:inline-block;padding:8px 60px 8px 15px;line-height:1.4;">' + this.options.message + '</span>';
var closeBtn = '<div id="cookieinfo-close" style="position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer;color:' + this.options.fg + ';font-size:18px;">' + this.options.closeText + '</div>';

// 拼接HTML时，msgSpan在前，closeBtn在后
var cookieBar = '<div id="cookieinfo" style="position:fixed;' + this.options.position + ':0;left:0;width:100%;height:' + this.options.height + ';min-height:' + this.options.minHeight + ';background:' + this.options.bg + ';color:' + this.options.fg + ';font-size:' + this.options.fontSize + ';font-family:' + this.options.fontFamily + ';z-index:' + (this.options.zindex + 1) + ';text-align:' + this.options.textAlign + ';">' + msgSpan + closeBtn + '</div>';

适配你提供的代码片段 #

如果你提供的代码里build_viewport_mask之后的insert方法是完整的，直接找到其中拼接这两个元素的地方，把span的代码移到div的前面即可。这样修改后，页面上就会先显示span内容，再显示关闭按钮的div了。

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