个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试将新创建的元素附加到 div，然后将 div 附加到文档片段，但它没有按预期工作。请帮我确定我缺少的东西。
//array of values to look up
let channels = ["channel1", "channel2", "channel3","channel4","channel5","channel6","channel7","channel8","channel9","channel10","channel11","channel12","channel13","channel14","channel15","channel16"];
//jsonp request function defined
function streamRequest () {
//identify DOM elements for final appendChild
let docFrag = document.createDocumentFragment();
let container = document.getElementById("main-container");
//create container and elements for the acquired information
let div = document.createElement("div");
let image = document.createElement("img");
let p = document.createElement("p");
let p1 = document.createElement("p");
let p2 = document.createElement("p");
//variables for request responses
let logo;
let name;
let status;
let game;
channels.forEach(function channelsRequest(channel){
$.getJSON("https://api.twitch.tv/kraken/streams/" + channel + "?callback=?", function callback(data) {
if(data.stream === null){
status = "Offline"
game = "Offline"
} else if (data.stream != null) {
status = "Online"
game = data.stream.game
}
console.log(channel, status, game);
$.getJSON("https://api.twitch.tv/kraken/channels/" + channel + "?callback=?",function logoRequest(data) {
name = data.display_name;
if(data.logo === null) {
logo = "http://www.logowik.com/uploads/images/379_twitch.jpg"
} else if (data.logo != null) {
logo = data.logo
}
//set attributes and inner HTML for new elements
image.setAttribute("src",logo);
image.setAttribute("alt","photo of channel's image");
image.className = "image";
p.innerHTML = name;
p.className = "name";
p1.innerHTML = status;
p1.className = "status";
p2.innerHTML = game;
p2.className = "game";
//append elements to the div
div.appendChild(image)
div.appendChild(p)
div.appendChild(p1)
if(status === "Online"){
div.appendChild(p2)
}
div.className = "tv-block";
docFrag.appendChild(div);
console.log(data, name, logo, docFrag);
});
});
});
//append final document fragment to the DOM
container.appendChild(docFrag);
};
`
来 self understand ，您应该能够将所有内容附加到 div，然后将 div 附加到片段。当我运行代码时，没有对 DOM 进行任何修改。我觉得可能是作用域问题，或者第二个json请求没有设置好
最佳答案
我知道这个答案会在一年后出现，但由于我刚刚完成了同样的挑战，所以我认为分享我的解决方案可能是有意义的，因为我也遇到了同样的问题。 It looks like创建一个新的 DOM 元素并将所有生成的 div 附加到它，然后将这个元素附加到现有的 DOM 元素比使用文档片段更快。所以我的结构看起来像这样:
<body>
<main>
<header>
</header>
</main>
<footer>
</footer>
</body>
然后我将一个在 js 中创建并包含所有生成的 div 的 div#container 附加到主体。
这是 completed project 的链接.
关于javascript - 为什么我的 appendChild 不能与 createDocumentFragment 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37065209/
26
4
0
我对以下示例中的 createDocumentFragment() 有疑问: Click the button to make changes to a list item, using the cr
我正在尝试通过对应用程序中的现有表进行一些更改来重新格式化表。我在互联网上搜索了以下错误，但没有找到任何解决方案。 我收到的错误如下: Cannot read property 'createDocu
我试图从 openwheater 应用程序打印表中的一些 JSON 数据。我在互联网上搜索了解决方案，但找不到真正的解决方案。我是初学者，所以这可能是一个非常简单的错误 希望有人能帮助我走上正确的道路
我正在学习 HTML DOM 模型，但遇到了一个问题。我无法理解 createDocumentFragment() 方法在以下代码中的工作原理。 HTML 代码: CoffeeTea Try i
在一个函数中，我经常创建 DocumentFragment 对象，因此我喜欢在过程完成后将其删除。DocumentFragment 没有父级，因此我无法使用例如: node.parentNode.re
这个问题已经有答案了: Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? (5 个回答) 已关闭 4 年前。 所以
我读到 createDocumentFragment 比在 for 循环中将元素一个一个地附加到 DOM 快得多，例如见here . 我想做什么: 在文档片段中创建一个表列。此列应包含数组中的数字(例
如果您使用 document.createDocumentFragment() 创建一个 DocumentFragment，将子项附加到它，然后将缓冲区附加到某物，缓冲区的所有子项似乎都消失了。示例:
我正在尝试实现 magnific popup 我有以下链接load json 当我单击链接时，灯箱处于加载状态并抛出异常，如下所示 Uncaught TypeError: Cannot call me
我试图找出使用 document.createDocumentFragment 之间的区别与使用 HTML 相比元素。 他们在行为或表现上有区别吗？ 最佳答案 两个和 document.create
我正在玩弄一个函数并得到 b.createDocumentFragment is not a function (jQuery) 我的职能是 function tweetCount(url) {
我正在尝试运行此循环，以便创建特定数量的列并向每列添加正方形。目标是在一个循环中完成所有这一切，但我的循环将成功运行一次，然后退出。 function gridBuilder(columns,rows
是否可以在将元素附加到文档之前在 documentFragment 内部通过其 ID 引用元素？ 例如: var docFragment = document.createDocumentFragme
我正在尝试将新创建的元素附加到 div，然后将 div 附加到文档片段，但它没有按预期工作。请帮我确定我缺少的东西。 //array of values to look up let channels
如何使用 createDocumentFragment 一次创建七个嵌套的 div 元素？ 我想创建一个容器 A，其中包含 A1、A2、A3 和 A4，然后在 A2 中创建 A2a 和 A2b。 注意
我正在尝试获取网页并加载到 bootstrap 2.3.2 弹出窗口中。到目前为止，我有: $.ajax({ type: "POST", url: "AjaxUpdate/getHtml",
在页面启动期间，我尝试向 DOM 添加一个元素。 我有以下代码: $(document).ready(function () { $(document).prepend(""); }); 我已
我想用 Javascript 添加大量 html，当我尝试添加 时出现问题之后一切正常: 这是我的 HTML: 这是我的脚本: var sec_nom='wa'; document.querySe
我目前正在使用 Meteor 框架构建一个网站。现在，我正在尝试获取它，以便当我单击 DOM 中的某个元素(通过 handle 呈现)时，新元素会附加到当前单击的元素。我正在使用 jquery 执行此
据我所知，文档片段的好处是它们不会导致回流事件，直到片段被插入到 DOM 中。听起来很合理，但似乎非 DOM 元素也不会导致重排。 例如: // with document fragment var
我是一名优秀的程序员,十分优秀！