JS暴力操作节点

发表于 | 分类于 |
字数统计: 252 | 阅读时长 ≈ 1

在创建节点的时候，如果遇到很多标签里的操作节点，使用上节提到的引用obj.appendChild();方法就会非常麻烦。我们这这种情况通常使用innerHTML
这种方法同样不符合规范，但是为了使用方便起见，很多浏览器都兼容。毕竟阻碍生产力的终将会被淘汰
下面我们用一个例子，来介绍暴力操作节点的使用
点击按钮一次，瞬间出现春夏秋冬以及小黑点
obj.innerHTML不光可以写值，也可以读值 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<title>innerHTML</title>
<script>
function add3(){
	var ul =document.getElementsByTagName('ul')[0];
	ul.innerHTML ='<li>spring</li><li>summer</li><li>autumn</li>';
}

function add1(){
	var ul=document.getElementsByTagName('ul')[0];
	ul.innerHTML+='<li>winter</li>';
}
</script>
</head>

<body>
<input type="button" value="add spring summer autumn" onclick="add3();"/>
<input type="button" value="add winter" onclick="add1();"/>
<ul></ul>
</body>