文档章节

删除和创建子对象 innerHTML增加节点

a
 adustdu2015
发布于 2016/04/11 17:24
字数 330
阅读 23
收藏 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>删除节点,创建节点</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="布尔教育 http://www.itbool.com" />

</head>

    <body>

        <input type="button" value="删除一个节点"  onclick="del();"/>

    <ul>

        <li>春</li>

        <li>夏</li>

        <li>秋</li>

        <li>冬</li>

    </ul>

    </body>

    <script>

    function del(){

        //删除标签

        var lis=document.getElementsByTagName('li');

        var last=lis[lis.length-1];

        //删除子对象

        last.parentNode.removeChild(last);

    }

    </script>

</html>

/*****************************************/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>创建节点</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="布尔教育 http://www.itbool.com" />

</head>

    <body>

        <h1>创建节点</h1>

        <input type="button" value="增加" onclick="add()"/>

    <ul>

        <li>春</li>

        <li>夏</li>

        <li>秋</li>

    </ul>

    </body>

    <script>

    function add(){

        //创建节点

        var li=document.createElement('li');

        var text=document.createTextNode('冬');

        li.appendChild(text);

        document.getElementsByTagName('ul')[0].appendChild(li);

    }

    </script>

</html>

/***********************************/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>暴力添加节点</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="布尔教育 http://www.itbool.com" />

</head>

    <body>

     <input type="button"value="添加春夏秋" onclick="add3()" />

     <input type="button" value="添加冬" onclick="add1()"/>

     <ul></ul>

    </body>

    <script>

    function add3(){

     var ul=document.getElementsByTagName('ul')[0];

     ul.innerHTML='<li>春</li><li>秋</li><li>夏</li>';

    }

    function add1 () {

     var ul=document.getElementsByTagName('ul')[0];

     ul.innerHTML+='<li>冬</li>'

    }

    </script>

</html>


© 著作权归作者所有

a
粉丝 1
博文 65
码字总数 14043
作品 0
钦州
私信 提问
第75天:jQuery中DOM操作

一、基础操作 1.html() 使用html()方法读取或者设置元素的innerHTML。 就是相当于javascript里头的innerHTML。 2.text() 使用text()方法读取或者设置元素的innerText。 就是相当于javascrip...

半指温柔乐
2017/11/05
0
0
textContent 与 innerText、innerHTML 的区别

目录 内容 Node.textContent 属性表示一个节点及其后代的文本内容。 1. 语法 2. 描述 如果 element 是 Document,DocumentType 或者 Notation 类型节点,则 textContent 返回 null。如果你要...

科研者
2017/10/24
0
0
JS基础-DOM Node节点

DOM 节点 节点(Node) 释义 对象 文档节点 整个文档 Document 对象 元素节点 每个HTML元素 Eelement 对象 文本节点 HTML元素内的文本 Text 对象 属性节点 每个HTML的属性 Attribute 对象 注释...

ZHAO_JH
2018/07/21
11
0
原生js操作dom的方法

今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考。 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元...

黄金林
2016/12/21
7
0
还记得那些年你修改过的 DOM 吗

还记得那些年你修改过的 DOM 吗 ⭐️ 更多前端技术和知识点,搜索订阅号 订阅 框架用多了,你还记得那些操作 DOM 的纯 JS 语法吗?看看这篇文章,来回顾一下~ 🤔 操作 className addClass...

JS菌
04/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部