JS——DOM操作(createElement、appendChild的用法,及todolist案例)

createElement、appendChild的用法

讲解:

(1)语法:document.createElement(nodename) 【参数nodename为节点对象元素,必须】 即:该方法通过指定名称创建一个元素

(2)语法:node.appendChild(node) 【参数node为节点对象,必须】即:该方法可向节点的子节点列表的末尾添加新的子节点

用原生js方法,简单制作todolist案例    

//可以参考本人之前做过的vue中的todolist案例,链接:https://www.cnblogs.com/ytraister/p/10534181.html

演示效果如下图:

显示代码如下:

代码解释:

第15行代码:当点击按钮触发,创建li元素

第18行代码:把li元素添加到ul元素之后

第17行代码:把输入的文本的值添加到相应的li元素当中

第20行代码:把表单中的文本内容清空(即:文本的值为空值)

原文地址:https://www.cnblogs.com/ytraister/p/10896926.html

时间: 2024-08-03 20:44:21

JS——DOM操作(createElement、appendChild的用法,及todolist案例)的相关文章

js createElement appendChild createTextNode用法

xml不支持innerHTML 1 <p id="bj">北京</p> 2 <script type="text/javascript"> 3 //创建<div> 节点,添加到<body>节点中 4 var divElement=document.createElement("div"); 5 divElement.innerHTML="<B>AFASFD</

JS DOM操作(创建、遍历、获取、操作、删除节点)

创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic

Js DOM 操作

HTML DOM对标签属性的操作 1.获取属性值 对象.getAttribute("属性名") 对象.属性名 2.设置属性 对象.setAttribute("属性名","属性值") 对象.属性名 = "属性值" 3.删除属性 对象.remove("属性名") 对象.属性 = "" ? 以上操作不包含对class的操作 如果要对class进行操作 那么class需要写成className

JS——DOM操作(childNodes、nodeType和children区别与用法)

DOM中节点的类型 DOM中一共有12中类型.但是我们常用的只有几种. 首先我们了解下DOM中一般常见的节点类型有哪些? 1.元素节点 DOM中的原子都是元素节点,比如<body><table><div>等等. 如果把Web上的文档比作一座大厦,则元素就是构成这块大厦的砖石.一个文档是由N个元素组成的.元素可包含其他元素. 2.文本节点 任意的文字.空格.换行.空白行都算是文本节点. 3.属性节点 属性节点,故名思议就是其他节点的属性.例如所有的元素都有title属性,

js——DOM操作(一)

DOM:Document Object Model  文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义  为了能够让程序(js)去操作页面中的元素 DOM会把文档看作是一棵树,同时定义了很多方法来操作这颗树中的每一个元素(节点) DOM节点 如: getElementById getElementByTagName document document.body ... //*************************************** childNode

js DOM操作练习

1.有如下html,如果用js获得被选中的option的text描述(非value)<select id="select_id">    <option vlue="1">text1</option>    <option vlue="2">text2</option>    <option vlue="3">text3</option>   

JS DOM操作

DOM --文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法. 在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM. DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言.. Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等, Dom技术使得页面的交互性大大地增强. var  v  =  document.getEl

JS DOM操作兼容

<style> *{ margin:0; padding:0; } li{ list-style-type:none } </style> </head> <body> <input type="button" value="点我"> <div id="div"> <ul> </ul> </div> <script> var i

JS——DOM操作(操纵元素属性【getAttribute、setAttribute...】)

常见元素操作: (1):oDiv.style.display='block'; (2):oDiv.style['display']='block'; (3):DOM方式 [看下面列举↓↓↓↓] DOM方式操作元素属性 1>获取:getAttribute(' 名称 ') 2>设置:setAttribute(' 名称 ',' 值 ') 3>删除:removeAttribute(' 名称 ') 详细看如下代码: 1 <!DOCTYPE html> 2 <html lang=&