자바스크립트에서 새 노드를 만드는 방법은 무엇입니까?
- 醉折花枝作酒筹원래의
- 2021-07-16 11:08:264559검색
메서드는 다음과 같습니다. 1. createElement(), 요소 노드 생성 2. createTextNode(), 텍스트 노드 생성 3. createComment(), 주석 노드 생성 4. createDocumentFragment(), 문서 조각 노드 생성
이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
(1)document.createElement(tagName)
createElement()는 요소 노드, 즉 nodeType=1인 노드를 만드는 데 사용됩니다. 그 중 tagName은 HTML 태그의 이름이며, 노드 객체를 반환하게 됩니다.
(2)document.createTextNode(text)
createTextNode()는 텍스트 노드, 즉 nodeType=3인 노드를 만드는 데 사용됩니다. 그 중 text는 텍스트 노드의 내용으로, 노드 객체가 반환됩니다.
(3)document.createComment(comment)
createComment()는 comment 노드, 즉 nodeType=8인 노드를 만드는 데 사용됩니다. 그 중 comment는 댓글의 내용으로 노드 객체를 반환하게 된다.
(4)document.createDocumentFragment);
createDocumentFragment()는 문서 조각 노드를 만드는 데 사용됩니다. 문서 조각 노드는 요소 노드, 텍스트 노드, 주석 노드 등과 같은 다양한 유형의 노드를 포함할 수 있는 여러 DOM 노드의 모음입니다. 문서 조각 노드는 처음 생성될 때 비어 있으므로 노드를 추가해야 합니다.
예를 들어 다음과 같이 dc6dce4a544fdca2df29d5ac0ea9906b 태그를 만듭니다.
wvarpp = document.createElement("div") //다음 코드는 dc6dce4a544fdca2df29d5ac0ea9906b 요소를 만드는 데 사용됩니다.
var node=document. createTextNode("새 단락입니다.")//dc6dce4a544fdca2df29d5ac0ea9906b 요소에 텍스트 노드 추가:
pp.appendChild(node); //dc6dce4a544fdca2df29d5ac0ea9906b 요소에 텍스트 노드 추가:
var element=document.getElementById( "div1"); //마지막으로 기존 요소에 p 요소를 추가합니다. 기존 요소 찾기:
element.appendChild(pp); //기존 요소에 추가
insertBefore() 메서드 사용: 시작 위치에 새 요소 추가
<body>
<div id="div1">
<p id="p1">这是一个段落。 </p>
<pid="p2">这是另外一个段落。</p>
</div>
<script>
var pp = document.createElement("div") //以下代码是用于创建<div>元愫
var node=document.createTextNode("这是新段落。")://为 <div>元素添加文本节点
pp.appendChild(node); //将文本节点添加到<div>元素中
var element=document.getElementById("div1"); //最后,在-一个已存在的元素中添加div元素。查找已存在的元素:
element.appendChild(pp); //添加到已存在的元素中:
</script>
</body>[권장 학습: javascript 고급 튜토리얼 ]
위 내용은 자바스크립트에서 새 노드를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!