删除元素示例代码

<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. Word打开时显示*模板*，删除模板

    XP系统, 找到目录 C:\Documents and Settings\Administrator\Application Data\Microsoft\Templates 删除里面的模板文件即可

  2. Redis 与Spring-data-redis 整合后封装的工具类

    此工具类方法是使用了redis 与spring 整合后,才可以使用的工具类,将 spring-data-redis 一些我们开发中常用的方法进行了封装,方便我们日常开发中进行调用: package c ...

  3. AngularJS——第8章 服务

    第8章 服务 服务是一个对象或函数,对外提供特定的功能. 8.1 内建服务 1. $location是对原生Javascript中location对象属性和方法的封装. // $location内置服 ...

  4. pthreads v3下的同步处理synchronized

    之所以会用到同步,是因为如果多个线程中对同一个资源进行操作时,会发生混乱. 比如2个线程对变量进行加1操作,第1个线程还没来的及改写数据时,第2个线程就对变量进行操作了,那变量最终的结果就是未知的,这 ...

  5. 关于Vector，map等迭代器问题

    vector.erase(it):后,it自动++,一定要弄清楚,删除成功后it指向删除的下一个地址. 对于map.erase(it),返回值为NULL,而Vector是返回itorator

  6. socket网络编程扫盲篇

    socket 是“套接字”的意思,是计算机之间进行通信的一种约定,也可以认为是一种技术.通过 socket 这种约定,一台计算机可以接收其他计算机的数据,也可以向其他计算机发送数据. socket 的 ...

  7. 异常检测(Anomaly Detection)

    十五.异常检测(Anomaly Detection) 15.1 问题的动机 参考文档: 15 - 1 - Problem Motivation (8 min).mkv 在接下来的一系列视频中,我将向大 ...

  8. 796B Find The Bone

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

  9. [Jmeter] Jmeter Plugins

    Plugins: Plugins Manager: https://jmeter-plugins.org/wiki/PluginsManager/ Custom Thread Groups: http ...

  10. Python之paramiko模块

    今天我们来了解一下python的paramiko模块 paramiko是python基于SSH用于远程服务器并执行相应的操作. 我们先在windows下安装paramiko 1.cmd下用pip安装p ...