<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding: 0; } li{ height: 20px; margin: 10px 0; border: 1px solid; text-align: center; list-style: none; } </style> </head> <body> <input type="text"> <input type="button" value="输入"> <ul id="ul"> <!--<li >1</li>--> <!--<li id="li">2</li>--> <!--<li>3</li>--> </ul> <script> var oVa=document.getElementsByTagName("input")[0]; var oPt=document.getElementsByTagName("input")[1]; var oUL=document.getElementById("ul"); // var oLi2=document.getElementById("li"); // var oLi=document.createElement("li");创建节点li // oLi.innerHTML="<b>我是创建的li</b>"; // oUL.appendChild(oLi)；在UL下添加li // oUL.insertBefore(oLi,oLi2);在id为li的节点前面添加个节点li; // oUL.removeChild(oLi2)；删除id为li的节点； // oUL.replaceChild(oLi,oLi2);li替换id为li的节点； oPt.onclick=function () { var oVale=oVa.value; var oLi=document.createElement("li"); oLi.innerHTML=oVale; oUL.appendChild(oLi) oVa.value=""; } </script> </body> </html>
DOM基本语法
猜你喜欢
转载自blog.csdn.net/xinye666666/article/details/80802336
今日推荐
周排行