HTML DOM元素

1.创建新的HTML元素

　　向HTML DOM添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加新元素</title>
</head>
<body>
<div id="domediv">
<p id="test1">第一条语句</p>
<p id="test2">第二条语句</p>
</div>
<button type="button" onclick="test()">添加新文本</button>
<script>
function test(){
    var a = document.createElement("p");                //创建一个新的元素
    var b = document.createTextNode("这是一个新的段落");    //创建一个新的文本
    a.appendChild(b);                                    //吧新文本加入新元素中

    var element = document.getElementById("domediv");    //创建新元素
    element.appendChild(a);                                //把字p元素放到div元素中
}
</script>
</body>
</html>

2.删除原有的HTML元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加新元素和删除已有元素</title>
</head>
<body>
<div id="demodiv">
    <p id="1">段落1</p>
    <p id="2">段落2</p>
</div>
<button type="button" onclick="test()">删除已有元素</button>
<script>
function test(){
    var a = document.getElementById("demodiv");        //获取父节点
    var b = document.getElementById("2");            //获取子节点
    a.removeChild(b);                                //删除父节点中的子节点
}
</script>
</body>
</html>

HTML DOM元素的更多相关文章

  1. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  2. JQuery利用sort对DOM元素进行排序

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...

  3. html标签属性（attribute）和dom元素的属性（property）

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  4. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  5. 如何隐藏DOM元素

    在CSS中,要隐藏DOM元素常见的方法有: 设置元素的opacity值为0 设置元素的visibility值为hidden 设置元素的display值为none 设置元素的position值为abso ...

  6. HTML DOM元素的Dragdrop

    在前端web页面中,为了提高用户体验,通常会希望将页面中的元素设计成可dragdop的,简化用户操作.这一设计特性在缺少鼠标的触摸屏设备上,显得更为重要. 在早期的应用中,我们通常需要借助第三方的ja ...

  7. DOM元素querySelectorAll可能让你意外的特性表现

    一.时间紧急,废话少说 本文所在的页面藏匿了下面这些代码: <img id="outside"> <div id="my-id"> &l ...

  8. 使用dom元素和jquery元素实现简单增删改的练习

    软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...

  9. 返本求源——DOM元素的特性与属性

    抛砖引玉 很多前端类库(比如dojo与JQuery)在涉及dom操作时都会见到两个模块:attr.prop.某天代码复查时,见到一段为某节点设置文本的代码: attr.set(node, 'inner ...

  10. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

随机推荐

  1. demo02TextView

    main.xml----- /layout/activity_main.xml <RelativeLayout xmlns:android="http://schemas.androi ...

  2. Android 利用Service实现下载网络图片至sdk卡

    package com.example.myapp5; import android.app.Activity; import android.content.Intent; import andro ...

  3. Struts2中<jsp:forward page="xxx.action"></jsp:forward>失效

    问题:在Struts2中<jsp:forward page="xxx.action"></jsp:forward>失效了,不但调转不过去还报404错误.不知 ...

  4. com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException

    Exception in thread "main" com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You ...

  5. php常见细节错误

    PHP编程中10个最常见的错误 PHP是一种非常流行的开源服务器端脚本语言,你在万维网看到的大多数网站都是使用php开发的.本篇经将为大家介绍PHP开发中10个最常见的问题,希望能够对朋友有所帮助. ...

  6. 利用VHD虚拟文件加密自己的个人信息

    1.制作VHD磁盘 计算机—管理—磁盘管理—操作—创建VHD 2.挂载卸载VHD磁盘 磁盘管理—操作—附加VHD 选择只读则不允许修改文件内容 3.用途 这样一个虚拟磁盘就被建立出来.它实际上仅仅是一 ...

  7. Date() 及其 如何验证用户输入的日期是合法的

    1.var someDate = new Date(Date.parse("May 25, 2004"));   <=>  var someDate = new Dat ...

  8. Awk使用一例：获取ASCII可见字符

    要做一个需求, 支持可见特殊字符的密码设置. 首先, 需要获取到所有可见特殊字符. 到网上搜索到 ASCII 字符表格, 并复制到文本文件 vschars.txt: 00 00 0 nul 100 4 ...

  9. 161116、springmvc自己实现防止表单重复提交（基于注解）

    原理:在去某个页面直接生成一个随机数(这里使用的是UUID)并放入session中,用户提交表单时将这个随机数传入服务端与session中的值进行比较,如果不不存在或不相等,则认为是重复提交:如果相等 ...

  10. 28、Oracle（四）用户权限控制

    一)用户Oracle中的用户分为二大类1)Oracle数据库服务器创建时,由系统自动创建的用户,叫系统用户,如sys.2)利用系统用户创建的用户,叫普通用户,如scott,hr,c##tiger,zh ...