需要帮助使用.append()在Jquery的div元素



我使用JQuery使用变量adj,它包含几个字符串,但只使用我选择的变量内部的字符串。我想使用这个变量使用.append()objective-containerdiv元素(ID)内创建文本。

我不知道出了什么问题,但是有一个错误信息我不明白。

错误信息:

ReferenceError: Can't find variable: $
message: "Can't find variable: $"
line: 1
column: 2
sourceURL: "file:///var/mobile/Containers/Data/Application/1343EDD2-1DC1-4FCA-A570-8272D543005C/Documents/files/clicker/objectives/objScript.js"
stack: "global code@file:///var/mobile/Containers/Data/Application/1343EDD2-1DC1-4FCA-A570-8272D543005C/Documents/files/clicker/objectives/objScript.js:1:2"
JS/Jquery:

$(document).ready(function() {
let obj = ["get points: 100",""];
let currentObj = obj[0];
let objective = "<div class="objective-text"><p>" + currentObj + "</p></div>";
// default
$("#objective-container").append(objective); 
});

Html:

<div id="objective-container" class="objectiveContainer">
<!—- objectives go here -—>
</div>
</body>
</html>

首先,这个错误告诉我们,您想要的HTML没有正确呈现,因为它找不到$,它被解释为一个属性。为了使用它作为jQuery符号,你必须通过script标签包含它,否则jQuery方法将无法运行。

所以一定要把你想要的版本放在你的html head标签中:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

改进:使用模板字符串将currentObj直接插入objective


现在下面的代码可以正常工作了

$(document).ready(function() {
let obj = ["get points: 100",""];
let currentObj = obj[0];
let objective = `<div class='objective-text'><p>${currentObj}</p></div>`;
// default
$("#objective-container").append(objective); 
});
<!DOCTYPE html>
<html>
<head>
<!-- meta tags -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="objective-container" class="objectiveContainer">
<!—- objectives go here -—>
</div>
</body>
</html>

代码对我来说很好,看起来它只是不识别$变量,这只是一个指向jQuery的指针。确保在HTML页面中包含了jQuery库,如下所示。

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript"></script>
</head>