자바스크립트에 요소를 추가하는 방법
- 青灯夜游원래의
- 2021-06-23 15:57:1614838검색
메서드: 1.appendChild() 메소드는 "appendChild(newchild)" 구문을 사용하여 끝에 새 요소를 삽입합니다. 2. insertBefore() 메소드는 새 구문 "insertBefore(newchild)를 사용하여 시작 부분에 새 요소를 삽입합니다. ,refchild)".
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
문서에 새 노드(요소)를 삽입하는 방법에는 두 가지가 있습니다. 하나는 처음에 삽입하는 것이고, 다른 하나는 끝에 삽입하는 것입니다.
appendChild() 메서드: 끝에 새 노드 삽입
JavaScript appendChild() 메서드는 현재 노드의 하위 노드 목록 끝에 새 하위 노드를 추가합니다. 사용법은 다음과 같습니다.
appendChild(newchild)
newchild 매개변수는 새로 추가된 노드 객체를 나타내며 새로 추가된 노드를 반환합니다.
예제 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="demo">单击按钮创建并添加p标签</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var p=document.createElement("p");
var t=document.createTextNode("新添的p标签");
p.appendChild(t);
document.body.appendChild(p);
};
</script>
</body>
</html>렌더링:
매개변수 노드가 문서 트리에 이미 존재하는 경우 문서 트리에서 삭제된 후 새 위치에 다시 삽입됩니다. 추가된 노드가 DocumentFragment 노드인 경우 직접 삽입되지 않고, 현재 노드의 끝에 자식 노드가 삽입됩니다.
문서 트리에 요소를 추가하면 브라우저가 해당 요소를 즉시 렌더링합니다. 이후에는 이 요소에 대한 모든 수정 사항이 실시간으로 브라우저에 반영됩니다.
insertBefore() 메소드: 시작 부분에 새 노드 삽입
JavaScript insertBefore() 메소드는 현재 노드의 하위 노드 목록 시작 부분에 새 하위 노드를 추가합니다. 사용법은 다음과 같습니다.
insertBefore(newchild, refchild)
매개변수 newchild는 새로 삽입된 노드를 나타내고, refchild는 새 노드가 삽입되는 노드를 나타내며, 삽입된 노드 뒤의 인접 위치를 지정하는 데 사용됩니다. 삽입이 성공한 후 이 메서드는 새로 삽입된 하위 노드를 반환합니다.
예제 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">单击按钮插入一个项目列表</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)
var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>
</body>
</html>
}렌더링:
[관련 권장사항: javascript 학습 튜토리얼]
위 내용은 자바스크립트에 요소를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!