追加节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Insert title here</title>

<style type="text/css">

li{border:1px solid red;}

div{border:5px solid green;}

</style>

</head>

<body>

<ul id="ul1"><li>li-1</li><li>li-2</li><li>li-3</li><li>li-4</li><li>li-5</li></ul>

<div id="div1">div-1</div>

<input type="button" value="给ul追加子li"/>

<input type="button" value="给div1追加哥哥"/>

<input type="button" value="把ul下li全部去掉"/>

</body>

</html>

<script type="text/javascript">

var i=0;

document.getElementsByTagName('input')[0].onclick=function(){

    i++;

    ob=document.createElement("li");

    ob.innerHTML="li-"+i;

    document.getElementById("ul1").appendChild(ob);

}

document.getElementsByTagName('input')[1].onclick=function(){

    divOb=document.getElementById("div1");

    ob1=document.createElement("div");

    ob1.innerHTML="div-n";

    document.body.insertBefore(ob1,divOb);

}

document.getElementsByTagName('input')[2].onclick=function(){

    var fOb=document.getElementById('ul1');

    var cOb=document.getElementById('ul1').childNodes;

    alert(cOb.length);

    for(var i=cOb.length-1;i>=0;i--){

        fOb.removeChild(cOb[i]);

    }

}

</script>

javascript追加节点的更多相关文章

  1. 前端之javascript的节点操作和Event

    一 节点的增删改查 创建节点:createElement(标签名):创建一个指定名称的节点. 追加节点: 追加一个子节点:somenode.appendChild(标签名) 指定某个位置前面添加一个节 ...

  2. javascript判断节点是否在dom

    在项目中碰到同事写的一段代码: //焦点必须在实时dom树中 if (ele && typeof this.document.contains === "function&q ...

  3. javascript创建节点的事件绑定

    javascript创建节点的事件绑定 timeupdate事件是<video>中用来返回视频播放进度的事件,绑定在<video>标签返回视频播放位置(每秒计). 现video ...

  4. javascript div元素后追加节点

    例子解释: 这段代码创建新的 <p> 元素: var para=document.createElement("p"); 如需向 <p> 元素添加文本,您必 ...

  5. JavaScript DOM节点和文档类型

    以下的例子以此HTML文档结构为例: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  6. 【转】JavaScript获取节点类型、节点名称和节点值

    DOM节点信息包括节点类型(nodeType).节点名称(nodeName)和节点值(nodeValue). 节点类型 DOM节点中,每个节点都拥有不同的类型.W3C规范中常用的 DOM节点类型有以下 ...

  7. javascript DOM 节点 第18节

    <html> <head> <title>DOM对象</title> </head><body><div >DOM对 ...

  8. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

  9. JavaScript之节点的创建、替换、删除、插入

    1.节点的创建 节点的创建使用document.creatElment();文本节点的创建使用document.creatTextNode();如想把<li>哈密瓜</li>添 ...

随机推荐

  1. 【网页布局基础】css布局学习总结

    三种定位机制 1.标准文档流:从上到下,从左到右输出文档内容 2.浮动 3.绝对定位 需要注意的是块级元素如div p ul 等 行级元素如span strong img input等 块级元素与行级 ...

  2. es5-class

    1. 通过class定义类/实现类的继承2. 在类中通过constructor定义构造方法3. 通过new来创建类的实例4. 通过extends来实现类的继承5. 通过super调用父类的构造方法6. ...

  3. org.springframework.web.servlet.DispatcherServlet异常

    org.springframework.web.servlet.DispatcherServlet: No mapping found for HTTP request with URI [/] in ...

  4. macOS免费的NTFS读写软件

    Mounty for Mac brew cask install mounty

  5. php重定向说明

    302  临时重定向 header("location:http://api.com/headline?" . http_build_query($_REQUEST)); 301  ...

  6. zabbix 发送邮件到企业微信

    #!/usr/bin/python2.7#_*_coding:utf-8 _*_#auther:拿来用用import requests,sys,jsonimport urllib3urllib3.di ...

  7. gensim中TaggedDocument 怎么使用

    我有两个目录,我想从中读取它们的文本文件并给它们贴上标签,但我不知道如何通过taggedDocument来实现这一点.我以为它可以作为标记文档([strings],[labels])工作,但这显然不起 ...

  8. JZOI1134 迷宫(maze)

    #include <bits/stdc++.h> #define ll long long #define INF 2147483647 #define mem_INF 213906214 ...

  9. 牛客 判断t1树中是否含有与t2树拓扑结构完全相同的子树

    题目链接:https://www.nowcoder.com/practice/5a41ce17e8194e1688aa83a73137f7ee?tpId=101&tqId=33239& ...

  10. Codeforces 1173A Nauuo and Votes

    题目链接:http://codeforces.com/problemset/problem/1173/A 思路:模拟. AC代码: #include<bits/stdc++.h> usin ...