Javascript 尝试追加时出现非法错误

我的问题是，我试图在制作彩虹文字的教程中添加一些东西，因为我试图将其添加到基于nodejs的聊天中的自定义颜色代码中。我在控制台中收到“SyntaxError:意外令牌非法”消息。有人能告诉我我的错误是什么，或者可能为我修复它吗？提前谢谢

$('head').append('<style> #chat .rainbow { background-image: -webkit-gradient( linear,     left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f),  color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9,  #ff2), color-stop(1, #f22) )!important;
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6,  #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent!important;
  -webkit-background-clip: text!important;
  background-clip: text!important; } </style>')

$（'head'）.append（'chat.rainbow{背景图片：-webkit渐变（线性、左上、右上、颜色停止（0，#f22）、颜色停止（0.15，#f2f）、颜色停止（0.3，#22f）、颜色停止（0.45，#2ff）、颜色停止（0.6，#2f2）、颜色停止（0.75，#2f2）、颜色停止（0.9，#ff2）、颜色停止（1，35F22））；
背景图像：渐变（线性、左上、右上、颜色停止（0，#f22）、颜色停止（0.15，#f2f）、颜色停止（0.3，#22f）、颜色停止（0.45，#2ff）、颜色停止（0.6，#2f2）、颜色停止（0.75，#2f2）、颜色停止（0.9，#ff2）、颜色停止（1，#f22））；
颜色：透明！重要；
-webkit背景剪辑：文本！重要；
背景剪辑：文本！重要；}'）

试试：

$（'head'）.append（'chat.rainbow{背景图片：-webkit渐变（线性、左上、右上、颜色停止（0，#f22）、颜色停止（0.15，#f2f）、颜色停止（0.3，#22f）、颜色停止（0.45，#2ff）、颜色停止（0.6，#2f2）、颜色停止（0.75，#2f2）、颜色停止（0.9，#ff2）、颜色停止（1，35F22））\
背景图像：渐变（线性、左上、右上、颜色停止（0，#f22）、颜色停止（0.15，#f2f）、颜色停止（0.3，#22f）、颜色停止（0.45，#2ff）、颜色停止（0.6，#2f2）、颜色停止（0.75，#2f2）、颜色停止（0.9，#ff2）、颜色停止（1，#f22））\
颜色：透明！重要\
-webkit背景剪辑：文本！重要\
背景剪辑：text！important；}'）；

---

在每行末尾添加反斜杠会告诉JavaScript引擎字符串将继续到下一行，从而避免自动插入分号的麻烦。

尝试将所有内容放在一行中

$('head').append('<style> #chat .rainbow { background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9,  #ff2), color-stop(1, #f22) )!important; background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6,  #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent!important;-webkit-background-clip: text!important; background-clip: text!important; } </style>');

$（'head'）.append（'chat.rainbow{背景图像：-webkit渐变（线性、左上、右上、颜色停止（0，#f22）、颜色停止（0.15，#f2f）、颜色停止（0.3，#22f）、颜色停止（0.45，#2ff）、颜色停止（0.6，#2f2）、颜色停止（0.75，#2f2）、颜色停止（0.9，#ff2）、颜色停止（1，#渐变）重要背景图像：背景图像（线性，左上，右上，颜色停止（0，#f22），颜色停止（0.15，#f2f），颜色停止（0.3，#22f），颜色停止（0.45，#2ff），颜色停止（0.6，#2f2），颜色停止（0.75，#2f2），颜色停止（0.9，#ff2），颜色停止（1，#f22）），颜色：透明！重要；-webkit背景剪辑：文本！重要；背景剪辑：重要；'）；

恐怕您不能用JavaScript开始新行。

使用多个字符串：

$('head').append('<style> #chat .rainbow { background-image: -webkit-gradient( linear,     left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f),  color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9,  #ff2), color-stop(1, #f22) )!important;' +
'background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6,  #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );' +
'color:transparent!important;' +
'-webkit-background-clip: text!important;' +
'background-clip: text!important; } </style>');

$（'head'）.append（'chat.rainbow{背景图片：-webkit渐变（线性、左上、右上、颜色停止（0，#f22）、颜色停止（0.15，#f2f）、颜色停止（0.3，#22f）、颜色停止（0.45，#2ff）、颜色停止（0.6，#2f2）、颜色停止（0.75，#2f2）、颜色停止（0.9，#ff2）、颜色停止（1，#重要）+
“背景图像：渐变（线性、左上、右上、颜色停止（0，#f22）、颜色停止（0.15，#f2f）、颜色停止（0.3，#22f）、颜色停止（0.45，#2ff）、颜色停止（0.6，#2f2）、颜色停止（0.75，#2f2）、颜色停止（0.9，#ff2）、颜色停止（1，#f22）”+
'颜色：透明！重要；'+
'-webkit背景剪辑：文本！重要；'+
'背景剪辑：text！important；}'）；

您需要将其放在一行上，因为默认情况下javascript字符串文本不能跨越多行。这可以通过在末尾添加

\

或浓缩字符串来解决（或者只做多个附录，但在这种情况下没有意义，因为添加的是整个样式标记）.

这段代码是一行代码，还是使用换行符？您要追加的字符串参数被拆分。您需要注意字符串中的换行符：谢谢所有回答的人，它现在可以工作了。我以前没有使用过append，只是尝试直接复制粘贴CSS。换行符可以工作。

费利克斯克林解释说：“OP为什么要尝试这样做？谢谢OP为什么要尝试这样做？”？
$('head').append('<style> #chat .rainbow { background-image: -webkit-gradient( linear,     left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f),  color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9,  #ff2), color-stop(1, #f22) )!important;' +
'background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6,  #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );' +
'color:transparent!important;' +
'-webkit-background-clip: text!important;' +
'background-clip: text!important; } </style>');