添加子节点到末尾 父节点 调用此方法
特点:类似于剪切的效果
代码:
function swap()
{
var ul = document.getElementById("ulid");
var div2 = document.getElementById("div2");
div2.appendChild(ul);
}
点击之后:
在某个节点之前插入一个新的节点,自己不能插入,需要父节点插入,所以这个方法有父节点调用
两个参数
要插入的节点
在谁之前插入
插入一个节点,节点不存在,就创建
代码:
function insert()
{
var insertli = document.createElement("li");
var text = document.createTextNode("okokok");
insertli.appendChild(text);
var ulid = document.getElementById("ulid");
var li2 = document.getElementById("li2");
ulid.insertBefore(insertli,li2);
}
点击之后:
自己无法删除自己,只能通过父亲节点删除,所以这个方法时父节点调用的
代码:
function remove()
{
var ul = document.getElementById("ulid");
var lihaha = document.getElementById("haha");
ul.removeChild(lihaha);
}
点击后:
两个参数:
第一个参数:新节点
第二个参数:旧节点
代码:
function replace()
{
var newli = document.createElement("li");
var text = document.createTextNode("第一个");
newli.appendChild(text);
var li1 = document.getElementById("li1");
var ulid = document.getElementById("ulid");
ulid.replaceChild(newli,li1);
}
点击后:
代码:
function copy()
{
var ul = document.getElementById("ulid");
var ulcopy = ul.cloneNode(true);
var div2 = document.getElementById("div2");
div2.appendChild(ulcopy);
}
点击后:
这个属性不是dom的组成部分,但是大多数浏览器都支持的属性
第一个作用:获取文本内容
这是一个好孩子
function copy()
{
var p = document.getElementById("pid");
alert(p.innerHTML);
}
第二个作用:向标签里面设置内容(可以是html代码)
这是一个好孩子
function copy()
{
var div1 = document.getElementById("div1");
div1.innerHTML = "";
}
点击之后:
案例 动态显示时间
*var date = new Date();
*date.toLocaleString();
需要页面每一秒获取一次时间
*setInterval()
显示到页面上:
每一秒向div里面写一次时间
代码:
function time()
{
var date = new Date();
var timeCN = date.toLocaleString();
var div = document.getElementById("div1");
div.innerHTML = timeCN;
}
setInterval("time()",1000);