元素的三种创建方法
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. 由[].slice.call()引发的思考

    由[].slice.call()引发的思考   经常看到大家用[].slice.call()或者Array.prototype.slice.call():  我一直是一知半解的,今天算是基本弄清楚了, ...

  2. JSON运用在文件

    #include <iostream>#include <fstream>#define JSON_IS_AMALGAMATION#include "json/jso ...

  3. MQTT协议探究(一)

    1 准备阶段 MQTT客户端:https://www.cnblogs.com/linzhanfly/p/9923577.html WireShark MQTT服务器(iot.eclipse.org) ...

  4. C#通讯框架改写

    现有项目是利用C#的socket与PLC进行实时通讯,PLC有两种通讯模式——常规采集&高频采集. 其中常规采集大概在10ms左右发送一次数据,高频采集大概在2ms左右发送一次数据. 现有代码 ...

  5. .NET Core 3.0 发布单文件可执行程序

    Windows dotnet publish -r win10-x64 /p:PublishSingleFile=true maxOS dotnet publish -r osx-x64 /p:Pub ...

  6. sip呼叫里SDP的一些字段的含义

    v=0 o=- 1 0 IN IP4 164.135.25.51 #local ip ,即本机SIP信令交互地址 s=SNS call #用于传递会话主题 c=IN IP4 164.135.25.51 ...

  7. IPhone中H5页面用on绑定click无效的解决方法

    首先声明本人资质尚浅,本文只用于个人总结.如有错误,欢迎指正.共同提高. --------------------------------------------------------------- ...

  8. 多线程--volatile

    在解释volatile关键字之前,先说说java的指令重排以及代码的执行顺序. 指令重排: public void sum(){ int x = 1; int y = 2; int x = x + 1 ...

  9. SpringAOP的实现方式

    1.使用SpringAPI实现AOP <aop:config> <!-- 切入点:需要操作的目标类中的目标方法 execution中只需要修改全类名 --> <aop:p ...

  10. uuid:全局唯一标识符

    uuid1:IEEE 802 MAC地址 import uuid ''' UUID1值使用主机的MAC地址计算.uuid模块使用getnode函数来获取当前系统的MAC值 ''' print(uuid ...