删除元素示例代码

<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. ERROR: APK path is not specified for

    1. 打开project structure 2.设置outpath路径 最好为绝对路径 点击确定  重新编译即可. Note: Android Studio版本使用

  2. Query to find the eligible indexes for rebuilding

    Query to find the eligible indexes for rebuilding The following script can be used to determine whic ...

  3. Logback报错 no applicable action for [Encoding], current ElementPath is [[configuration][appender][Encoding]]

    老版本是0.9,移到springboot项目,解决办法,删除xml配置文件节点<Encoding>UTF-8</Encoding>

  4. [转]C#中HttpClient使用注意：预热与长连接

    最近在测试一个第三方API,准备集成在我们的网站应用中.API的调用使用的是.NET中的HttpClient,由于这个API会在关键业务中用到,对调用API的整体响应速度有严格要求,所以对HttpCl ...

  5. python 字符串 列表 字典 常用方法

    今天学习内容如下: 1.学习昨天练习题目的解题新方法 #1.使用while循环输入 1 2 3 4 5 6 8 9 10 ''' count = 0 while count < 10: coun ...

  6. Centos7上卸载openJdk安装，安装自己的JDK1.8

    1.下载jdk-1.8,官网下载1.8 注意:不要使用wget命令去下载jdk,若能够下载下来,解压的时候也会报错的: 2.卸载openjdk (1)使用  rpm -qa | grep java  ...

  7. spring MVC中Dubbo的配置

    1.服务提供方的bubbo配置: <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi=& ...

  8. C&Cpp.CallGraph

    1. CodeViz http://www.skynet.ie/~mel/projects/codeviz/ 2. http://my.oschina.net/zmlblog/blog/186308

  9. LIbreOJ #6011. 「网络流 24 题」运输问题 最小费用最大流

    #6011. 「网络流 24 题」运输问题 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: 匿名 提交提交记录统计讨论测试数据   题目描述 ...

  10. Bootstrap学习遇到的role属性--- 无障碍网页应用属性

    以前接触过Bootstrap,但也只是仅仅接触,现在重新学习下,今天看到一个例子中的属性有一个role, 查阅资料发现这个是--WAI-ARIA无障碍设计属性: 通俗说是该设计为了一些盲人,失聪,残疾 ...