使用insertAdjacentHTML添加onclick属性时JavaScript代码报错：预期')'

错误原因 #

报错源于字符串嵌套的引号冲突：

• 外层insertAdjacentHTML的第二个参数用单引号'包裹整个input标签代码
• 而input的onclick属性值里，this.value='Wait...'使用的单引号会和外层的单引号提前匹配，导致字符串被意外截断，JS解析时出现语法混乱，抛出“预期')'”的错误。

修复方案 #

方式一：转义内部单引号 #

把onclick代码里的单引号用反斜杠\转义，让JS识别这是字符串内部的引号而非结束符：

function StartupJS() {
 document.getElementById('cphForm_btnHistory').insertAdjacentHTML("beforebegin", '<input type="submit" name="ctl00$cphForm$btnSave" value="Save" onclick="javascript :if (chkSaveValidation()){this.disabled=true; this.value=\'Wait...\';__doPostBack(\'ctl00$cphForm$btnSave\',\'\')}else{return false;};" id="cphForm_btnSave" tabindex="41" class="dbody" style="width:60px;">')
}

方式二：调整引号层级 #

将外层包裹input代码的单引号替换为双引号（注意ASPX页面中双引号需用"转义），避免嵌套冲突：

function StartupJS() {
 document.getElementById('cphForm_btnHistory').insertAdjacentHTML("beforebegin", "<input type="submit" name="ctl00$cphForm$btnSave" value="Save" onclick="javascript :if (chkSaveValidation()){this.disabled=true; this.value="Wait...";__doPostBack("ctl00$cphForm$btnSave","")}else{return false;};" id="cphForm_btnSave" tabindex="41" class="dbody" style="width:60px;">")
}

更推荐方式一，转义内部引号的写法在ASPX页面中更不易出现解析问题。

内容的提问来源于stack exchange，提问作者Sup Ravi Kumar