元素的三种创建方法
1、doumrnt.write(可以写类名,各种表情属性)
      script写在哪里就创建在哪
<button>点我</button>
<script>
document.write("<li class='kk'>生活</li>")
</script>
<button>点我</button>

  

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

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)

删除 替换 克隆节点
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元素的更多相关文章

  1. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  2. JQuery利用sort对DOM元素进行排序

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...

  3. html标签属性(attribute)和dom元素的属性(property)

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  4. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  5. 如何隐藏DOM元素

    在CSS中,要隐藏DOM元素常见的方法有: 设置元素的opacity值为0 设置元素的visibility值为hidden 设置元素的display值为none 设置元素的position值为abso ...

  6. HTML DOM元素的Dragdrop

    在前端web页面中,为了提高用户体验,通常会希望将页面中的元素设计成可dragdop的,简化用户操作.这一设计特性在缺少鼠标的触摸屏设备上,显得更为重要. 在早期的应用中,我们通常需要借助第三方的ja ...

  7. DOM元素querySelectorAll可能让你意外的特性表现

    一.时间紧急,废话少说 本文所在的页面藏匿了下面这些代码: <img id="outside"> <div id="my-id"> &l ...

  8. 使用dom元素和jquery元素实现简单增删改的练习

    软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...

  9. 返本求源——DOM元素的特性与属性

    抛砖引玉 很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr.prop.某天代码复查时,见到一段为某节点设置文本的代码: attr.set(node, 'inner ...

  10. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

随机推荐

  1. vue开发中利用正则限制input框的输入(手机号、非0开头的正整数等)

    我们在前端开发中经常会碰到类似手机号输入获取验证码的情况,通常情况下手机号的输入需要只能输入11位的整数数字.并且需要过滤掉一些明显不符合手机号格式的输入,那么我们就需要用户在输入的时候就控制可以输入 ...

  2. aspectcore 简单解析

    .netcore 下aspectcore  的使用 动态代理: static void Main(string[] args) { Console.WriteLine("Hello Worl ...

  3. [转载]linux的top命令中cpu信息的含义

    https://www.cnblogs.com/wjoyxt/p/4918742.html 原文很好,我就不摘录了.

  4. python之字符串类型的格式化

    python之字符串类型的格式化 要点:python字符串通过format()方法进行格式化处理.(Python语言同时支持两种字符串格式化方法,一种类似C语言中printf()函数的格式化方法,支持 ...

  5. 一个下午整理的Web前端常见的英文缩写

    PV (Page View)页面浏览量 FED(Front-End Development)前端开发 F2E(Front-End Engineer)前端工程师 WWW(World Wide Web)万 ...

  6. JS原生实现照片抽奖

    HTML表格标记实现九宫格,放入九张图片.利用CSS的滤镜属性控制图片的透明度.Javascript实现抽奖和中奖. 可以做为教师上课,随机抽取回答问题的同学,使学生感受到随机的公平性,简单有趣! 点 ...

  7. NETGEAR路由器登录不上 重新获取ip

    当NETGEAR路由器更改了"局域网IP配置",或者重启之后,会出现登录不上的情况 释放IP地址 # ipconfig /release 重新获取 # ipconfig /rene ...

  8. ORACLE数据库 自动备份 定时计划任务 windows

    疑问为什么没有输入oracle 的数据库安装目录就能直接备份呢,可能是因为oracle默认安装c盘,在docs命令直接能操作吧,不信可以使用sqlplus试试. 一共分三步: 一.建立一个.bat 批 ...

  9. WPF - 仿QQ2014

    声明:非原创.项目是网上发现的,以学习为目的重写了部分代码,合理地调整了下布局,巧妙地简化了下Style样式.重写还算是有价值的,并非完全复制. 效果: 获取项目源码:https://pan.baid ...

  10. go语言字符串函数小结

    拼接字符串 func Join(a []string, sep string) string, 拼接字符串,将一个[]string的切片通过分隔符,拼接成一个字符串,类似于PHP的implode() ...