今天学习了innerHTML属性,希望可以帮助到有需要的小伙伴
innerHTML属性
用法:
可以用来设置或返回表格行的开始标签和结束标签之间的HTML
缺点:
innerHTML属性存在安全问题(innerHTML属性的值不能由用户写)
下面我们向列表中加一个li
实例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性操作</title>
</head>
<body>
<ul id="city">
<li>北京</li>
<li id="tj">天津</li>
<li>南京</li>
</ul>
<script>
// 为<ul>元素添加新的<li>元素
// 节点方式操作
/*
var newLi = document.createElement('li');
var textNode = document.createTextNode('重庆');
newLi.appendChild(textNode);
var city = document.getElementById('city');
city.appendChild(newLi);
*/
// 元素方式操作
var city = document.getElementById('city');
// 获取指定元素的HTML代码
// city.innerHTML获取到该元素的文本内容
var html = city.innerHTML;
console.log(html);
/*
<li>北京</li>
<li id="tj">天津</li>
<li>南京</li
*/
// 在原有li的基础上加上新的一个li元素
html += '<li>重庆</li>';
city.innerHTML = html;
</script>
</body>
</html>