javascript动态添加元素

JianfeiMa

于 2020-12-12 10:02:50 发布

阅读量1k

点赞数

分类专栏：前端文章标签： javascript js

本文链接：https://blog.csdn.net/HardProgrammer/article/details/111057264

版权

前端专栏收录该内容

6 篇文章

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script>
   function addLiElement() {
       var liElement = document.createElement('li');
       //liElement.innerHTML = '这是新增的li元素';
       var labelElement = document.createElement('label');
       var inputElement = document.createElement('input');
       labelElement.innerHTML = '单号：'
       inputElement.setAttribute('name', 'expressNumber');
       liElement.appendChild(labelElement);
       liElement.appendChild(inputElement);
       var ulElement = document.getElementById('myid');
       ulElement.appendChild(liElement);
   }
</script>
<ul id="myid">
   <li>aa</li>
   <li>bb</li>
</ul>
<p>
   <button onClick="addLiElement();">动态添加标签</button>
</p>
</body>
</html>