.appendChild() is not a function when using jQuery(.appendChild() 不是使用 jQuery 时的函数)
问题描述
我正在尝试从纯 JavaScript 过渡到 jQuery.我有一个 for 循环,它使用来自 API 的数据动态创建 HTML 元素.这是我的旧代码:
I am trying to transition from pure JavaScript to jQuery. I have a for loop that dynamically creates HTML elements with data from an API. Here is my old code:
recipeDiv = [];
recipeDiv[i] = document.createElement("div");
recipeDiv[i].setAttribute("class", "recipeBlock");
recipeDiv[i].appendChild(someElement);
但是,当我转换到 jQuery 并改用它时
However, when I transitioned to jQuery and used this instead
recipeDiv = [];
recipeDiv[i] = $("<div/>").addClass("recipeBlock");
recipeDiv[i].appendChild(someElement);
我收到以下错误:recipeDiv[i].appendChild 不是函数
我知道 .appendChild() 不是 jQuery (JS),但它不应该仍然有效吗?即使我使用 jQuery .append() 函数,我仍然会收到错误.
I know that .appendChild() isn't jQuery (JS), but shouldn't it still work? Even if I use the jQuery .append() function, I still get an error.
非常感谢任何帮助.
推荐答案
您似乎对互换 jQuery 和 DOM API 感到困惑.它们不能互换使用.document.createElement
返回一个 Element
和 $("<div/>")
返回jQuery
对象.Element
对象有 appendChild
方法,jQuery
对象有 append
方法.
You seem to be confusing yourself by inter-changing jQuery and DOM APIs. They cannot be used interchangeably. document.createElement
returns an Element
and $("<div />")
returns the jQuery
object. Element
object has the appendChild
method and jQuery
object has the append
method.
作为一种好的做法,我建议您在 DOM API 或 jQuery 之间进行选择,并坚持下去.这是针对您的问题的纯基于 jQuery 的解决方案
As a good practice, I would suggest you choose between DOM APIs or jQuery, and stick to it. Here is a pure jQuery based solution to your problem
var recipeContainer = $("<div/>")
.addClass("recipeContainer")
.appendTo("body");
var recipeDiv = [];
var likes = [];
for (var i = 0; i < 20; i++) {
//Create divs so you get a div for each recipe
recipeDiv[i] = $("<div/>").addClass("recipeBlock");
//Create divs to contain number of likes
likes[i] = $("<div/>")
.addClass("likes")
.html("<b>Likes</b>");
//Append likes blocks to recipe blocks
recipeDiv[i].append(likes[i]);
//Append recipe blocks to container
recipeContainer.append(recipeDiv[i]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
这篇关于.appendChild() 不是使用 jQuery 时的函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:.appendChild() 不是使用 jQuery 时的函数
基础教程推荐
- 直接将值设置为滑块 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01