web.随笔之创建新元素与复制元素

最新推荐文章于 2022-06-30 17:58:28 发布

春花秋月灬相伴

最新推荐文章于 2022-06-30 17:58:28 发布

阅读量211

点赞数

本文链接：https://blog.csdn.net/qq_38300174/article/details/71249153

版权

1. 创建新元素

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oUl=document.getElementById('ul1');
    var oTxt=document.getElementById('txt1');

    oBtn.onclick=function ()
    {
        var oLi=document.createElement('li');
        var aLi=oUl.getElementsByTagName('li');     
        oLi.innerHTML=oTxt.value;
        oUl.insertBefore(oLi, aLi[0]);//添加元素至aLi[0]前
        //oUl.appendChild(oLi);//此行作用添加元素至最后
    };
};
</script>
</head>

<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="创建li"/>
<ul id="ul1">
</ul>
</body>
</html>

复制元素 cloneNode

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
<body>

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>

<p id="demo">请点击按钮把项目从一个列表复制到另一个列表中。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var oul=document.getElementById("myList1")
var lis=oul.getElementsByTagName('li');
var itm=document.getElementById("myList2").lastChild;
var cln=itm.cloneNode(true);
//alert(lis[0].innerHTML);
//document.getElementById("myList1").appendChild(cln);//复制在myList1最后
document.getElementById("myList1").insertBefore(cln,lis[0]);//复制在指定位置之前
}
</script>
</body>
</html>

请尝试把参数cloneNode设置为 false将仅仅克隆空的 LI 元素

春花秋月灬相伴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web.随笔之创建新元素与复制元素

1. 创建新元素<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><script>window.onload=function (){ var oBtn=document.getElementById('btn1'); var oUl=document.getElementById(
复制链接

扫一扫