元素的三种创建方法
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. Unity 用脚本给EventTrigger添加各种事件

    using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Eve ...

  2. luogu2261余数求和题解--整除分块

    题目链接 https://www.luogu.org/problemnew/show/P2261 分析 显然\(k\) \(mod\) \(i=k-\lfloor {k/i}\rfloor\) \(\ ...

  3. Mac命令行提示

    之前看到一个大神的终端主题好炫,所以自己也想弄一个.看了很多中文的教程都不是很靠谱,效果并没有实现.不能说人家的不对,只能说自己水平有限.后来直接去看 github 上的官方教程,因为是官方嘛~所以肯 ...

  4. elmentUI为table中的单元格添加事件

    <el-main> <el-tabs v-model="curTab" type="card"> <!-- tab签 --> ...

  5. impala 建表时报错,不支持中文

    1.错误信息 (1366, "Incorrect string value: '\\xE6\\x8E\\x88\\xE6\\x9D\\x83...' for column 'search' ...

  6. C++中volatile

    volatile只保证其“可见性”,不保证其“原子性”. 执行count++;这条语句由3条指令组成: (1)将 count 的值从内存加载到 cpu 的某个 寄存器r: (2)将 寄存器r 的值 + ...

  7. 配置了ssh免密登录,仍然需要输入密码

    1 权限问题         原因 权限问题  chmod -R 700 ~/.ssh 

  8. redis和memcacahe、mongoDB的区别

    都是非关系型数据库,性能都非常高,但是mongoDB和memcache.redis是不同的两种类型.后两者主要用于数据的缓存,前者主要用在查询和储存大数据方面,是最接近数据库的文档型的非关系数据库. ...

  9. sklearn--回归

    一.线性回归 LinearRegression类就是我们平时所说的普通线性回归,它的损失函数如下所示: 对于这个损失函数,一般有梯度下降法和最小二乘法两种极小化损失函数的优化方法,而scikit-le ...

  10. TcxComboBoxProperties下拉框填充

    原文地址:https://www1.devexpress.com/Support/Center/Question/Details/CQ30369 Actually, the corresponding ...