ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptを使用してドキュメントにDOMノードを追加する方法の分析例
JavaScriptを使用してドキュメントにDOMノードを追加する方法の分析例
- PHPzオリジナル
- 2016-05-16 15:47:091315ブラウズ
この記事では、主に JavaScript でドキュメントに DOM ノードを追加する方法を紹介し、JavaScript での 2 つのノード作成方法を、JavaScript ノードの操作と実行時間の計算の関連技術を含めて比較および分析します。必要な友人は参照してください。詳細は次のとおりです:
ここでは 2 つの方法を比較します。1 つ目: 最初にすべてのノードを作成し、次にそれらをドキュメントの実行時間に追加します。2 つ目: 最初に空のコンテナーを追加します。ノードを作成してコンテナに追加する実行時間は、テストの観点から見ると、2 番目の方法の方が最初の方法よりも優れています。
操作の効果を次の図に示します。
具体的なコードは次のとおりです。
<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("p");
var obj=document.getElementById("main");
for(var i=0;i<count;i++)
{
var node=document.createElement("p");
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("p");
var obj=document.getElementById("main");
obj.appendChild(container);
for(var i=0;i<count;i++)
{
var node=document.createElement("p");
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 />
<p id="main" style="position:absolute;"></p>
</body>
</html>上記は次のとおりです。この章の全内容、詳細 関連チュートリアルについては、JavaScript ビデオ チュートリアル をご覧ください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。