집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트를 이용하여 문서에 DOM 노드를 추가하는 방법 분석 예시

자바스크립트를 이용하여 문서에 DOM 노드를 추가하는 방법 분석 예시

PHPz원래의: 2016-05-16 15:47:091317검색

이 글에서는 주로 자바스크립트에서 문서에 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("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 비디오 튜토리얼을 방문하세요!

성명：

이전 기사：FileSystemObject 객체를 사용하여 텍스트 내용을 작성하는 JavaScript 방법 file_javascript 기술다음 기사：FileSystemObject 객체를 사용하여 텍스트 내용을 작성하는 JavaScript 방법 file_javascript 기술

자바스크립트를 이용하여 문서에 DOM 노드를 추가하는 방법 분석 예시

관련 기사