ケース 1 - ボタンをクリックして追加機能を実現します
効果は以下の通りです
コードは以下のように表示されます
<body>
<button>添加</button>
<ul>
<!-- <li>热门新闻</li> -->
</ul>
</body>
<script>
var news = ['热门新闻','娱乐新闻','财经新闻']
var oul = document.querySelector('ul');
render()
//渲染数据，将数据渲染到页面
function render(){
dom = '';
for(var i = 0;i<news.length;i++ ){
dom += `<li>${news[i]}</li>`;
}
oul.innerHTML = dom;
}
//谁在触发事件就需要获取谁，用于绑定事件
var btn1 = document.querySelector('button');
btn1.addEventListener('click',function(){
var name = prompt('请输入要添加的新闻标题');
news.push(name) //此处添加数据后，页面中并没有渲染
console.log(news);
//当数据操作完成后，希望将数据渲染到页面上，调用以下渲染函数
render();
})
</script>