删除元素示例代码

<html>

<head>

</head>

<body>

<div>

<div id="delId"><h3>js删除元素之div及其内容</h3><p>这是段落内容</p></div>

</div>

<button onclick="fun()">删除div</button>

<script>

function fun(){

//删除div

　var obj = document.getElementById("delId");

　　var parentObj = obj.parentNode;//获取div的父对象

　　parentObj.removeChild(obj);//通过div的父对象把它删除

}

</script>

</body>

</html>

追加元素代码示例

<html>

<head>

<title> new document </title>

<meta name="generator" content="editplus">

<meta name="author" content="">

<meta name="keywords" content="">

<meta name="description" content="">

</head>

<SCRIPT LANGUAGE="JavaScript">

window.onload = function (){

inp.onclick = function(){

var inp = document.getElementById("list").getElementsByTagName('li')[2];  //在第三个li后面插入一个li

var div = document.createElement("li"); //创建一个li

div.style.cssText = "width:100px;height:100px;border:1px solid red;";  //设置style

//div.id = 'id1';  //赋值id

inp.parentNode.insertBefore(div,inp.nextSibling)  //传入参数执行

}

}

</SCRIPT>

<body>

<input type="submit" id="inp" value="添加div" />

<ul id="list">

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

</ul>

</body>

</html>

插入子元素代码示例

<html>

<head>

<title> new document </title>

<meta name="generator" content="editplus">

<meta name="author" content="">

<meta name="keywords" content="">

<meta name="description" content="">

</head>

<ul id="list">

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

</ul>

<body>

<script language="javascript">

var o = document.getElementById('list').children[2];

//创建链接

function createA(url,text)

{

var a = document.createElement("a");

a.href = url;

a.innerHTML = text;

a.style.color = "red";

o.appendChild(a);

}

createA("http://www.***.com/","插入子元素");

</script> 

<script language="javascript">

var o = document.getElementById('list').children[1];

//创建DIV

function createDIV(text)

{

var div = document.createElement("div");

div.innerHTML = text;

o.appendChild(div);

}

createDIV("插入子元素");

</script>

</body>

</html>

js,javascript,删除元素,创建元素,插入子元素的更多相关文章

  1. js封装删除数组指定的某个元素的方法

    首先可以给JS的数组对象定义一个函数,用于查找指定的元素在数组中的位置,即索引,代码为: Array.prototype.indexOf = function(val) { for (var i = ...

  2. Javascript删除数组里的某个元素

    删除array数组中的某个元素,首先需要确定需要删除元素的索引值. ? 1 2 3 4 5 6 7 var arr=[1,5,6,12,453,324]; function indexOf(val){ ...

  3. Javascript删除数组中指定值的元素

    Array.prototype.remove = function(index){ if(isNaN(index) || index > this.length){return false;} ...

  4. javascript删除数组中的某个元素-----拓展Array 原型方法

    Array.prototype.remove = function (dx) { if(isNaN(dx) || dx > this.length) { return false; } var  ...

  5. javascript数组操作(创建、元素删除、数组的拷贝)

    这篇文章主要介绍了javascript数组操作,包括创建.元素的访问.元素删除.数组的拷贝等操作,还有其它示例,需要的朋友可以参考下 1.数组的创建 复制代码 代码如下: var arrayObj = ...

  6. js创建与追加元素

    用javascript创建元素 : var NewNode = document.creatElement('div'); 结合appendChild与insertBefore插入到DOM树中 ins ...

  7. Javascript:DOM动态创建元素实例应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js 给json添加新的字段，或者添加一组数据，在JS数组指定位置删除、插入、替换元素

    JS定义了一个json数据var test={name:"name",age:"12"};需要给test再添加一个字段,需要什么办法,可以让test的值为{na ...

  9. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

随机推荐

  1. 快速排序中BUG int 与 int *

    #include <iostream>using namespace std;int QKPass(int* , int , int);  //若声明为 int QKPass(int, i ...

  2. Linux apt-get命令

    一.简介 Ubuntu系列系统包管理工具.   二.常用指令   1.查询功能 apt-cache search package 搜索软件包 apt-cache show package 获取包的相关 ...

  3. 13.Mysql触发器

    13.触发器13.1 创建触发器定义:触发器是与表有关的数据库对象,在满足定义条件时触发,并执行触发器中定义的语句集合.语法:create trigger 触发器名称 触发时机 触发事件 on 表名 ...

  4. andorid 表格布局

    tablelayout.xml表格布局 <?xml version="1.0" encoding="utf-8"?> <TableLayout ...

  5. 796B Find The Bone

    B. Find The Bone time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  6. eclipse手动安装alibaba代码规范插件

    如果你的开发环境无法访问外网,那么手动安装阿里巴巴的代码规范插件是一个不错的选择.另外,很多教程说该插件需要jdk1.8以上,我试了一下jdk1.7也是可以运行的,更低的版本就不知道了,貌似jdk1. ...

  7. oracle sqlplus操作

    步骤: su - oracle 切换到oracle用户 sqlplus /nolog 进入sqlplus命令行 conn cps/cps 连接到cps用户的数据库,cps/cps表示:用户/密码 执行 ...

  8. hook api实现

    https://www.cnblogs.com/findumars/p/8734116.html https://blog.csdn.net/lonelyrains/article/details/2 ...

  9. python 日志滚动 分文件

    import logging from logging.handlers import RotatingFileHandler import datetime import os def main() ...

  10. Zxing2.1扫描取景框变形问题解决

    修改竖屏扫描的贴子,2.0之前的都很适用.可是到了2.1,有些贴子的做法可以将扫描框改为竖屏,但是取景框里扫描到的东西是变形的(扁的),本人仔细研究一番,终于解决了这个问题,下面贴出解决办法: 1.修 ...