이 기사에서는 JavaScript에서 요소를 동적으로 생성하고 삭제하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
DOM에서는 DOM 요소를 동적으로 쉽고 빠르게 삭제할 수 있습니다. 여기서 우리는 당신에게 간단한 소개를 드리겠습니다.
Example 1:
버튼을 동적으로 만듭니다
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<title> 동적 생성 버튼 </title>
<script language = "javaScript">
var a, b, ab, ba, c;
함수 createInputa () {
a = document.createElement ( "입력"); // DOM의 요소 생성 메소드를 사용하십시오
a.type = "버튼"; // 요소 유형을 설정합니다
a.value = "버튼 a"; // 요소의 값을 설정합니다
A.ATTACHEVENT ( "OnClick", addInputb); // 컨트롤을위한 이벤트를 추가합니다
document.body.appendChild (a); // 형태에 컨트롤을 추가합니다
// a = null; // 객체를 해제합니다
}
Example 2:
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<script type = "text/javaScript">
기능 test () {
// createElement () 레이블 이름을 지정하는 요소를 만듭니다 [예 : : HyperLink를 동적으로 만듭니다]
var createa = document.createElement ( "a");
createa.id = "a1";
createa.innertext = "Baidu에 연결";
createa.href = "// www.vevb.com";
//createa.color="green "/// 색상 추가 (스타일 속성을 잊지 마십시오. 그렇지 않으면 효과가 없습니다)
createa.style.color = "Green"
// 기본 위치 추가 -바디 및 하위 노드 추가
//document.body.appendChild(createa);
// 지정된 위치를 배치합니다
document.getElementById ( "div1"). AppendChild (Createa);
}
함수 test2 () {
// 지정된 위치에서 노드를 removeChild ()로 삭제합니다
documb // ID 이름 중복 js가 첫 번째를 가져 오려면
}
</스크립트>
</head>
<body>
<!-동적 요소 생성->
<입력 유형 = "버튼"value = "태그 만들기"onclick = "test ()"/> <br/>
<입력 유형 = "버튼"value = "태그를 만들려면 삭제"onclick = "test2 ()"/>
<div id = "div1">
</div>
</body>
</html>
여러 형식을 동적으로 생성합니다.
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<script type = "text/javaScript">
Window.onload = function () {
var abtn = document.createElement ( "입력");
var bbtn = document.createElement ( "입력");
var cbtn = document.createElement ( "입력");
abtn.type = "버튼";
abtn.value = "버튼 a";
abtn.onclick = copybtn;
bbtn.type = "버튼";
bbtn.value = "버튼 B";
bbtn.onclick = copybtn;
cbtn.type = "버튼";
cbtn.value = "버튼 c";
cbtn.onclick = clearcopybtn;
document.body.appendChild (ABTN);
document.body.appendChild (BBTN);
document.body.appendChild (CBTN);
};
함수 copybtn () {
var btn = document.createElement ( "입력");
btn.type = "버튼";
btn.value = this.value;
btn.iscopy = true;
btn.onclick = copybtn;
document.body.appendChild (BTN);
}
함수 clearcopybtn () {
var btns = document.getElementsByTagName ( "input");
var 길이 = btns.length;
for (var i = 길이 -1; i> = 0; i-) {
if (btns [i] .iscopy) {
document.body.removechild (btns [i]);
}
}
}
</스크립트>
</head>
<body>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.