删除元素示例代码

<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. SQL创建删除索引

    --创建唯一聚集索引create unique clustered index pk_table1 on table1 (column1) --创建唯一非聚集索引create unique noncl ...

  2. swift - 画图截取图片 - 保存相册

    1.图片截取 func test(addView:UIView) -> UIImage?{ UIGraphicsBeginImageContextWithOptions(CGSize(width ...

  3. webpack浅析---入口篇

    webpack有四个核心概念: 入口(entry) 输出(output) loader 插件(plugins) webpack-merge将环境.构建目标.运行时合并 入口: 入口起点是指webpac ...

  4. vuex写法

    <template> <div class="hello"> <p>{{count}}</p> <p> <butt ...

  5. thinkphp装修平台源码

    每日签到微擎微赞自助授权中心站长工具(new)☜=每日新帖=微信开发手册VIP优惠活动 开启辅助访问切换到宽版 用户名 自动登录  找回密码 密码 登录  立即注册 只需一步,快速开始 首页 微鱼商业 ...

  6. Oracle_SQL(4) DDL 表和约束

    数据库对象分为占存储空间的对象和不占存储存储空间的对象.占存储空间的对象主要包括:表.索引等.select distinct segment_type from dba_segments order ...

  7. ES6解构赋值的应用场景

    一.变量交换 1.ES6的方式 { let a=; let b=; [a,b]=[b,a]; console.log(a,b); } 输出为 2.ES5的方式 采用中间变量的方式进行存储 二.获取函数 ...

  8. andorid 数据储存

    .xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...

  9. ssm介绍

    1.Spring     Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE ...

  10. iOS.Operation-on-ZipFile

    Operation on ZipFile Reference 在Mac OS X和iOS中操作.zip文件(例如创建zip文件, 从zip文件中抽取数据): 1. http://stackoverfl ...