聊天信息生成原理

肖凌2019-06-08 13:13:05

<!DOCTYPE html>

<html>

<head>

<title>DOM聊天信息生成原理</title>

</head>

<body>

</body>

//创建input框

let input=document.createElement('input');

input.setAttribute('type','text');

document.body.appendChild(input);

//创建button按钮

let but=document.createElement('button');

but.textContent='提交';

but.setAttribute('name','submit');

document.body.appendChild(but);

//创建ul

let ul=document.createElement('ul');

document.body.appendChild(ul);

let btn=document.getElementsByTagName('button').item(0);

//点击button

btn.onclick=function(){

var li=document.createElement('li');

li.innerHTML=input.value;

ul.appendChild(li);

input.value='';

}

</script>

</html>