首页 技术 正文
技术 2022年11月23日
0 收藏 740 点赞 3,404 浏览 1632 个字

元素的三种创建方法1、doumrnt.write(可以写类名,各种表情属性)      script写在哪里就创建在哪

<button>点我</button>
<script>
document.write("<li class='kk'>生活</li>")
</script>
<button>点我</button>

  DOM元素

弊端:把原来的内容替换掉

var but=document.getElementsByTagName("button")[0];
//console.log(document.write);是一个函数
but.onclick=function () {
document.write("<li class='kk'>生活</li>");
}

 2、事件源.innerHTML +=”<li></li>”(经常用,写上 + 号,原来的内容不会被替换) 

ul.innerHTML+="<li class='kk'>生活</li>"

 3、利用dom的api创建元素        appendChild(“ 添加的元素 ”)  在父元素最后面添加元素        insertBefore(“ 添加的元素 ”,“添加的位置”) 指定位置添加

//利用dom的api创建元素  把创建的元素放在变量里
var newLi=document.createElement("li");
var newL=document.createElement("li");
//赋值
newLi.innerHTML="我是createElement创建的";
newL.innerHTML="我是appendChild创建的";
//添加到ul原来里面
ul.appendChild(newL);
//指定位置添加
var firUl=ul.firstElementChild || ul.firstChild;
ul.insertBefore(newLi,firUl)

DOM元素

删除 替换 克隆节点1、removeChild 删除节点

ul.removeChild(li3)

2、replaceChild(”新节点”,“旧节点”)替换节点(用的少)

ul.replaceChild(li3,li2)

3、克隆node.cloneNode(true)

//克隆li2标签 li2.cloneNode(true);深层复制。
for(var i=; i<; i++){
var clLi=li2.cloneNode(true);
ul.appendChild(clLi)
}

案例

点击按钮添加li列表,鼠标放上去高亮显示(鼠标离开也会有一个亮)

//需求:点击列表,添加四大美女,然后鼠标放到谁上面,谁高亮显示
//思路:创建一个数组,添加内容。利用for循环创建li标签添加到ul里面
//步骤:(指定多少个元素的创建最好用for循环)
var but=document.getElementsByTagName("button")[];
var arr=["昭君","西施","贵妃","貂蝉"];
var ul=document.getElementsByTagName("ul")[];
but.onclick=function(){
ul.innerHTML="";//只添加一次 原理,每次循环清空了在添加
for(var i=; i<arr.length; i++){
var li=document.createElement("li");
li.innerHTML=arr[i];
ul.appendChild(li);
}
//获取所有的Li标签然后,为他绑定事件,排他思想,高亮显示
var liArr=ul.children;
for(var i=; i<liArr.length; i++){
liArr[i].onmouseover=function(){
for(var j=; j<liArr.length; j++){
liArr[j].style.background=""
}
this.style.background="red"
}
}
}

在线用户

DOM元素

DOM元素

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141168.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:876 阅读:5,464
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,688
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,503
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:731 阅读:4,468
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:5,379
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,263
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站