您的位置：首页 > Web前端 > JavaScript

js操作DOM的各种方式

2017-11-03 17:01 369 查看
js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理
动态创建元素的三种方式：

第一种：

Document.write();

<body>
<input type="button" id="btn" value="生成元素" onclick="f1()"/>
<input type="text" value=""/>
<script>
document.write("这是新添加的内容");
</script>
<div id="d">
<script>
document.write("<input type='text' value='123'/>");
</script>
</div>
<script>
function f1(){
document.write("<input type='text' value='456'/>");
}
f1();
</script>


使用documen.write()创建元素时，会发生一个问题：默认情况之下，页面由上而下地加载，形成一个文档流，当执行完毕时，文档流就会关闭，从而将之前生成的元素冲刷掉，所以不推荐使用这种方法。

第二种：

使用innerHTML创建元素：

<body>
<div id="d"></div>
<input type="button" value="生成" id="btn"/>
<script>
var txt=document.getElementById("txt");
var d=document.getElementById("d");
var btn=document.getElementById("btn");
//此方法字符串具有不可变性，频繁的操作字符串会造成内存的浪费。
//    btn.onclick=function(){
//        for(var i=0;i<10;i++){
//            d.innerHTML+="<input type='text'><br />";
//        }
//    }
//因此我们可以先定义一个数组，将字符串存储在数组当中，最后在将数组转化为字符串。
var arr=[];
btn.onclick=function(){
for(var i=0;i<10;i++){
arr.push("<input type='text'><br />");
}
d.innerHTML=arr.join("");
}
</script>
</body>


此方法不适合创建很多元素（标签）时使用。

第三种：

使用document.createElement()创建一个元素：

<body>
<div id="d"></div>
<script>
var d = document.getElementById("d"); //获取div的id
var ul = document.createElement("ul");// 在这里创建一个ul标签
d.appendChild(ul);         //将存储在内存中ul标签剪切到div之中
var li = document.createElement("li");//因为都是字符串，所以需要加""是创建出来的一对标签
ul.appendChild(li);    //将存储在内存中的li标签剪切到ul之中
li.innerHTML ="1231321";
li.id = "abc";
ul.removeChild(li);  //使用removeChild()可以删除ul里面的li标签
</script>
</body>


使用jquey创建一个元素：

<body>
<div id="d"></div>
<script>
var d = $("#d"); //获取div的id
var ul = $("<ul></ul>");// 在这里创建一个ul标签
d.append(ul);         //将存储在内存中ul标签剪切到div之中
var li = $("<li></li>");//因为都是字符串，所以需要加""是创建出来的一对标签
ul.append(li);    //将存储在内存中的li标签剪切到ul之中
li.html("1231321");
li.prop("id") = "abc";
ul.remove(li);  //删除ul里面的li标签
</script>
</body>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JS dom
相关文章推荐
新的分享
章节导航