删除元素示例代码

<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. Mac git 终端使用

    终端有这个提示,这个按照命令 输入你的 git账号和邮箱就可以, 不然一直出这个提示 Your name and email address were configured automatically ...

  2. Django创建模型，迁移数据

    1.在models.py文件中添加代码 class notice(models.Model): notice_title = models.CharField(max_length=255) noti ...

  3. 用js写已知abc+cba = 1333，其中a、b、c均为一位数，编程求出满足条件的a、b、c所有组合。

    <!--<script type="text/javascript"> //已知abc+cba = 1333,其中a.b.c均为一位数,编程求出满足条件的a.b. ...

  4. Python中的 __all__和__path__ 解析

    https://blog.csdn.net/u012450329/article/details/53001071

  5. 9.10 h5日记

    9.10 1.什么是属性 属性是表示某些事物的一些特征 2.属性分为标签属性和样式属性,二者的区别在于哪里 标签属性:<img src="01.jpg" width=&quo ...

  6. Java图形化界面设计——GridBagConstraints

    JAVA布局模式:GridBagConstraints终极技巧参数详解 布局模式 :GridBagConstraints布局,先发一个实例: gridx = 2; // X2 gridy = 0; / ...

  7. php 多进程

    php 在使用场景中一般是处理web应用,所以多进程使用不适合在web中使用,且php-fpm中pcntl_fork不能使用,所以使用场景是在cgi模式下 一个进程调用pcntl_fork函数后,系统 ...

  8. hdu (kruska and prime) 继续畅通工程

    题目http://acm.hdu.edu.cn/showproblem.php?pid=1879 复习一下最小生成树的两个基本算法. 由于存在道路是否已修建的问题,如果已修建,那么该条道路的成本即为0 ...

  9. RabbitMQ 的基本介绍

    RabbitMQ官网教程:http://www.rabbitmq.com/getstarted.html RabbitMQ 是一个由 Erlang 语言开发的 AMQP 的开源实现.AMQP :Adv ...

  10. python中的迭代器 生成器 装饰器

    什么迭代器呢?它是一个带状态的对象,他能在你调用next()方法的时候返回容器中的下一个值,任何实现了__iter__和__next__()(python2中实现next())方法的对象都是迭代器,_ ...