作者：晨心晨艺日记 | 来源：互联网 | 2023-05-26 19:06
我有一个模板:
Use me
Template used: 0
你可以在这里试试代码.此代码基本上将模板(html5模板不在屏幕上呈现)复制到另一个div中.这允许您重用DOM.
问题:行"span.textCOntent= parseInt(span.textContent)+ 1;" 直接更改模板代码.我需要操作内容DOM并将其克隆到容器中,而无需 更改模板.这非常重要,因为如果我想重用代码,我需要它保持不变.
我已经尝试了多种方法来使用jQuery来模仿上面的Javascript代码,但我无法弄明白.如果有一个jQuery方式会更好.
1> talemyn..： 如果您需要 使用新importNode引入内容,然后在附加后修改它.
假设模板化的代码实际上很小,这应该足够快,以至于你永远不会注意到方法上的差异,但是,在这个特定的例子中alert(),会延迟内容的变化,所以你会看到"0",直到你点击"好",然后它会更新为"1".
代码更改将是:
function useIt() {
var cOntent= document.querySelector('template').content;
var targetCOntainer= document.querySelector('#container');
targetContainer.appendChild(document.importNode(content, true));
var $span = $(targetContainer).find("div:last-of-type").find("span");
$span.text(parseInt($span.text() + 1));
}
如果你没有结婚的想法clone()方法做你想做的事情,非常容易...但是,
但是 ,如果您需要克隆脚本,那么此方法将不起作用,"模板容器"元素中的任何脚本代码将在页面加载时立即触发.
该方法的简单版本代码clone()如下所示:
function useIt() {
var $cOntent= $("#template").clone();
var $span = $content.find("span");
$span.text(parseInt($span.text()) + 1);
$content.children().each(function() {
$("#container").append($(this));
});
}
假设您的模板是:
您也可以移出
感谢您指出jQuery没有看到模板标签.
推荐阅读
本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ...
[详细]
蜡笔小新 2023-12-13 06:02:20
JavaScript概述1.JavaScript定义JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言。它是弱类型语言，只能由浏览器解释执行。其中：脚本语言：解释运行（ ...
[详细]
蜡笔小新 2023-10-13 09:36:45
ImgettingabugwithInternetExplorer.Theiframedoesnthavecorrectsizeanditisdisplayedo ...
[详细]
蜡笔小新 2023-10-12 20:54:23
本文总结了在编写JS代码时，不同浏览器间的兼容性差异，并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ...
[详细]
蜡笔小新 2023-12-09 17:31:06
<!DOCTYPEhtml><html><head><metacharsetutf-8><head&g ...
[详细]
蜡笔小新 2023-10-12 18:59:44
Screen对象 JS获取浏览器高度或宽度 IE中： document.body.clientWidth>BODY对象宽度 document.body.clientHeight ...
[详细]
蜡笔小新 2023-10-12 16:20:05
本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ...
[详细]
蜡笔小新 2023-12-14 12:09:13
1，关于死锁的理解死锁，我们可以简单的理解为是两个线程同时使用同一资源，两个线程又得不到相应的资源而造成永无相互等待的情况。 2，模拟死锁背景介绍：我们创建一个朋友 ...
[详细]
蜡笔小新 2023-12-13 19:12:25
本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ...
[详细]
蜡笔小新 2023-12-12 12:45:59
本文介绍了2015年九月八日的js学习总结及相关知识点，包括参考书《javaScript Dom编程的艺术》、js简史、Dom、DHTML、解释型程序设计和编译型程序设计等内容。同时还提到了最佳实践是将标签放到HTML文档的最后，并且对语句和注释的使用进行了说明。 ...
[详细]
蜡笔小新 2023-12-10 11:10:08
8.1使用web地址LearnAboutafricanelephants. ...
[详细]
蜡笔小新 2023-10-17 21:55:36
前言对于从事技术的人员来说ajax是这好东西，都会使用，而且乐于使用。但对于新手，开发一个ajax实例，还有是难度的，必竟对于他们这是新东西。leo开发一个简单的ajax实例,用的是 ...
[详细]
蜡笔小新 2023-10-16 17:08:23
html5中template用法,html5标签 一、HTML5template元素初面 模板元素，基本上可以确定 ...
[详细]
蜡笔小新 2023-10-13 16:16:46
我试图制作一个进度条，如果还有更多内容仍被隐藏，则显示箭头。为了更清楚，我做 ...
[详细]
蜡笔小新 2023-10-12 19:31:36
IntheBestPracticestoimprovewebsitePerformancehttp:developer.yahoo.comperformancerules.h ...
[详细]
蜡笔小新 2023-10-12 18:40:17
京公网安备 11010802041100号