web前端学习

概述

在JavaScript中，可以创建、添加、删除、替换DOM元素。 1.创建DOM元素： document.createElement("标签名称"); 2.添加DOM元素： 父元素.appendChild(要添加子元素); 父元素.insertBefore(要添加的子元素，现有子元素); 3.删除DOM子元素： 父元素.removeChild(要删除子元素); 4.替换DOM子元素： 父元素.replaceChild(新元素名称,被替换旧元素);

1.创建DOM元素

createElement()函数用于以编程方式将元素添加到DOM。创建元素后并无法显示，还需要配合其他函数才能在页面中显示出来。

	
var new_ele = document.createElement("div");
new_ele.innerHTML = "这个是添加的";

2.添加DOM元素

给父元素添加一个子元素（成为最后一个）： 父元素.appendChild(要添加子元素); 在某元素的前面插入一个元素 父元素.insertBefore(要添加的子元素，现有子元素);

现有子元素

	
//给父元素添加一个子元素（成为最后一个）
var dom_father = document.getElementById("dom_father");
var new_ele = document.createElement("div");
new_ele.innerHTML = "appendChild添加的";
dom_father.appendChild(new_ele);

	
//在某元素的前面添加一个兄弟元素
var dom_father = document.getElementById("dom_father");
var dom_son = document.getElementById("dom_son");
var new_ele = document.createElement("div");
new_ele.innerHTML = "insert_before添加的";			
dom_father.insertBefore(new_ele,dom_son);

3.删除DOM元素

删除DOM子元素： 父元素.removeChild(要删除子元素);

这个是要删除的

	
var dom_father2 = document.getElementById("dom_father2");
var need_delete = document.getElementById("need_delete");
dom_father2.removeChild(need_delete);

4.替换DOM元素

替换DOM子元素： 父元素名称.replaceChild(新元素名称,被替换旧元素);

这个是要替换的

	
var dom_father3 = document.getElementById("dom_father3");
var need_replace = document.getElementById("need_replace");
var new_ele = document.createElement("div");
new_ele.innerHTML = "这是替换后的";			
dom_father3.replaceChild(new_ele,need_replace);