JavaScript는 동적으로 노드를 추가하고 삭제합니다.
- PHPz앞으로
- 2016-05-16 19:18:041646검색
사실 HTML은 XML과 유사합니다. W3C는 한때 HTML을 대체하기 위해 XML을 사용하기를 원했습니다. 이는 HTML과 XML이 여전히 특정 공통 특성을 가지고 있음을 의미합니다. 따라서 XML의 경우 구문 분석 및 동적 증가 또는 감소가 있습니다. HTML에서 사용되는 경우 노드의 기능은 버튼, 하이퍼링크 등과 같은 일부 HTML 요소를 동적으로 추가하는 것입니다. 이러한 웹 페이지의 동적 효과는 동적으로 설명할 수 있는 작은 예를 들어보겠습니다. 일부 버튼을 추가하고 일부 버튼을 동적으로 삭제합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test9.html</title>
<script type="text/javascript">
function test(){
//创建元素
var myElement = document.createElement("input");//输入想要创建的类型
myElement.type="button";
myElement.value="我是按钮";
myElement.id="id1";
//将元素添加到指定的节点
document.getElementById("p1").appendChild(myElement);
// document.body.appendChild(myElement);
}
function test1(){
//删除一个元素
// document.getElementById("p1").removeChild(document.getElementById("id1"));
//第二种方式灵活
document.getElementById("id1").parentNode.removeChild(document.getElementById("id1"));
}
</script>
</head>
<body>
<input type="button" onclick="test();" value="动态的创建一个按钮"><br/>
<input type="button" onclick="test1();" value="删除按钮"/>
<p id="p1" style="width:200px;height: 400px;border: 1px solid red;">
</p>
</body>
</html>
여기서 대부분의 문서 메서드를 사용하여 추가하고 삭제합니다. 노드 삭제 기능, 하하, 사실 document는 매우 강력한 Dom 객체입니다.
다음으로 체크박스에 대한 모든 옵션을 얻어오는 방법을 처리하기 위해 문서 이름에 대한 반복 메소드를 작성하고 이를 인쇄합니다. 코드는 다음과 같습니다
더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼
<!sDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test8.html</title>
<script type="text/javascript">
function test(){
var hobbys = document.getElementsByName("hobby");
for(var i =0; i < hobbys.length; i++){
//判断是否被选择
if(hobbys[i].checked){
window.alert("您的爱好是"+hobbys[i].value);
}
}
}
</script>
</head>
<body>
请选择你的爱好: <input type="checkbox" name="hobby" value="足球"/>足球<br/>
<input type="checkbox" name="hobby" value="篮球"/>篮球<br/>
<input type="checkbox" name="hobby" value="旅游"/>旅游<br/>
<input type="button" value="测试" onclick="test();">
</body>
</html>
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제