javascript将DOM节点添加到文档的方法实例分析
本文实例讲述了javascript将DOM节点添加到文档的方法。分享给大家供大家参考。具体如下：
这里对两种方法进行了比较：第一种：先创建所有节点，再添加到文档方式的运行时长；第二种：先向文档添加一个空容器，然后每创建一个节点，再添加到容器中方式的运行时长，从测试来看，第二种方法优于第一种！
运行效果如下图所示：
具体代码如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>将DOM节点添加到文档实例</title>
</head>
<script type="text/javascript">
//第一种：先创建所有节点，再添加到文档
function createAdd(count)
{
var start=new Date();
var container=document.createElement("div");
var obj=document.getElementById("main");
for(var i=0;i<count;i++)
{
var node=document.createElement("div");
node.style.position="absolute";
node.style.left=(6+parseInt(Math.random()*100))+"px";
node.style.top=(6+parseInt(Math.random()*100))+"px";
container.appendChild(node);
}
obj.appendChild(container);
var end=new Date();
var duration=end-start;
alert("第一种方式："+duration+"ms");
}
//第二种：先添加到文档一个空容器，再创建所有接点，并分别添加到容器中
function addCreate(count)
{
var start=new Date();
var container=document.createElement("div");
var obj=document.getElementById("main");
obj.appendChild(container);
for(var i=0;i<count;i++)
{
var node=document.createElement("div");
node.style.position="absolute";
node.style.left=(6+parseInt(Math.random()*100))+"px";
node.style.top=(6+parseInt(Math.random()*100))+"px";
container.appendChild(node);
}
var end=new Date();
var duration=end-start;
alert("第二种方式："+duration+"ms");
}
//检测输入的数据是否正确
function checkData()
{
var number=parseInt(document.getElementById("count").value);
return number;
}
//调用createAdd()函数
function callCreateAdd()
{
var count=checkData();
createAdd(count);
}
//调用addCreate()函数
function callAddCreate()
{
var count=checkData();
addCreate(count);
}
</script>
<body>
<h3>将DOM节点添加到文档实例</h3>
<hr style="border:1px solid #000000;" />
请输入一个整数：
<input type="text" id="count" name="count" />
<br />
<input type="button" id="createadd" name="createadd" value="第一种：先创建所有节点，再添加到文档方式的运行时长" onClick="callCreateAdd();" />
<input type="button" id="one" name="one" value="第二种：先向文档添加一个空容器，然后每创建一个节点，再添加到容器中方式的运行时长" onClick="callAddCreate();" />
<br />
<div id="main" style="position:absolute;"></div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍JavaScript DOM节点添加示例，包括了JavaScript DOM节点添加示例的使用技巧和注意事项，需要的朋友参考一下
-
问题内容： 在我当前的项目中，我尝试将一个添加到PDFBox文档中。更具体地说，我使用来自的图片。我的代码如下所示： 文档被创建；我可以添加文本，但是出现错误，指出图像没有足够的信息可显示。 任何有关我做错事情的线索？ 问题答案： 感谢您帮助我解决垃圾问题。昨晚和今天花了几个小时，人们对PipedIn / OutStreams感到困惑。无法解决。但是，我得到它的工作。事实证明，这并不是很困难。 我
-
问题内容： 我有一些arff文件。我想顺序阅读它们并创建一个大数据集。Instances.add（Instance inst）不会将字符串值添加到实例，因此尝试setDataset（）…但即使失败。有没有办法完成直观上正确的字符串操作？ 问题答案： 这是从邮件列表。我以前保存过 如何将两个数据文件a.arff和b.arff合并到一个数据列表中？ 取决于您在说什么合并。您是否只想追加第二个文件（两个
-
我正在使用PHP7.3编写一个函数，该函数循环访问输入中接收的一组节点，并将它们添加到文档中。 它可以工作，但当输入值不是数组而是DOMNodeList时，它只在第一个元素上循环。 要再现问题,请执行以下操作： 预期产出： 然而我得到： 循环是不完整的，并且不知为什么第一个元素的引用被从前一个列表中移除并添加到后一个列表中（因此大小为3）。而且，如果我评论 循环按预期遍历列表。函数appendCh
-
DOM节点操作 获取DOM节点 prototype,获取JS对象上的属性 Attribute,获取DOM标签上的属性 获取DOM节点 var div1 = document.getElementById('div1'); //元素 var divList = document.getElementByTagName('div'); //集合 console.log(divList.length);
-
本文向大家介绍JQuery创建DOM节点的方法，包括了JQuery创建DOM节点的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下： 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点，然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM操作并非这么简单。在DOM操作中，常常需要动态创建