- 新建插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
font-size: 20px;
font-family: "微软雅黑";
line-height: 25px;
}
div {
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<p> 选择你喜欢的书:
<input type="radio" name="book" id="offer" onclick="book()">剑指offer
<input type="radio" name="book" onclick="book()">深入理解Java虚拟机
</p>
<div id="div"></div>
<div></div>
<script>
function book() {
var img1;
var img2;
var ele = document.getElementsByName("book");
var a = document.getElementById("div")[0];
if (ele[0].checked){
img1 = document.createElement("img");
img1.setAttribute("src","../Image/1.png");
img1.setAttribute("alt","剑指offer");
a.appendChild(img1);
}else if (ele[1].checked){
img2 = document.createElement("img");
img2.setAttribute("src","../Image/2.png");
img2.setAttribute("alt"," Java虚拟机");
a.appendChild(img2);
}
}
</script>
<script>
</script>
</body>
</html>
- 替换删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0px;
margin: 0px;
font-size: 20px;
}
ul li{
text-decoration: none;
}
li{
float: left;
text-align: center;
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<ul>
<li>
<img src="../Image/1.png" alt="" id="1">
<p><input type="button" value="删除" onclick="del()"></p>
</li>
<li>
<img src="../Image/2.png" alt="" id="2">
<p><input type="button" value="替换" onclick="rep()"></p>
</li>
</ul>
<script>
function del() {
var img1 = document.getElementById("1");
img1.parentNode.removeChild(img1);
}
function rep () {
var old = document.getElementById("2");
var newImg = document.createElement("img");
newImg.setAttribute("src","../Image/1.png");
old.parentNode.replaceChild(newImg,old);
}
</script>
</body>
</html>
- 面向对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.showName = function () {
alert(this.name);
}
}
var stu1 = new person("hyf1",18,"女");
var stu2 = new person("hyf2",18,"女");
var stu3 = new person("hyf3",18,"女");
stu1.showName();
stu2.showName();
stu3.showName();
</script>
</body>
</html>