码迷,mamicode.com
首页 > Web开发 > 详细

js基础(dom增删改)

时间:2018-05-12 10:01:52      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:rtb   基础   操作   creat   app   完成   inner   bsp   元素   

新增节点:

/*
 * document.createElement()
 *        可以用于创建一个元素节点对象,
 *        它需要一个标签名作为参数,将会根据该标签名创建元素节点对象,
 *        并将创建好的对象作为返回值返回
 */
var li = document.createElement("li");
/*
 * document.createTextNode()
 *        可以用来创建一个文本节点对象
 *  需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回
 */
var gzText = document.createTextNode("广州");
/*
 * appendChild()
 *         - 向一个父节点中添加一个新的子节点
 *         - 用法:父节点.appendChild(子节点);
 */
li.appendChild(gzText);

 

/*
* insertBefore()
*     - 可以在指定的子节点前插入新的子节点
*  - 语法:
*         父节点.insertBefore(新节点,旧节点);
*/ city.insertBefore(li , bj);
/*
 * replaceChild()
 *     - 可以使用指定的子节点替换已有的子节点
 *     - 语法:父节点.replaceChild(新节点,旧节点);
 */
city.replaceChild(li , bj);

 

/*
* removeChild()
*     - 可以删除一个子节点
*     - 语法:父节点.removeChild(子节点);
*         
*         子节点.parentNode.removeChild(子节点);
*/
//city.removeChild(bj);

bj.parentNode.removeChild(bj);

 

//向city中添加广州
var city = document.getElementById("city");

/*
* 使用innerHTML也可以完成DOM的增删改的相关操作
* 一般我们会两种方式结合使用
*/
//city.innerHTML += "<li>广州</li>";

//创建一个li
var li = document.createElement("li");
//向li中设置文本
li.innerHTML = "广州";
//将li添加到city中
city.appendChild(li);Child(li);

 

js基础(dom增删改)

标签:rtb   基础   操作   creat   app   完成   inner   bsp   元素   

原文地址:https://www.cnblogs.com/lzb0803/p/9026890.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!