jQuery 有一个 append 方法,就是在某个元素基础上追加一些元素,但实际内部实现是需要先创建在追加,下面代码演示了一个创建 ul 和 li 的过程。注意:如果操作已有节点,那么已有节点会发生物理位置移动的现象。
实现代码
var obj_ul = document.createElement("ul"); var province = ["辽宁", "浙江", "河南"]; var city = ["shenyang", "hangzhou", "zhengzhou"]; for (var key in province) { // 创建 li var obj_li = document.createElement("li"); var text = document.createTextNode(province[key]); // 把新建的文本追加到 li 中 obj_li.appendChild(text); // 给 li 添加 id 属性 obj_li.setAttribute("id", city[key]); // 把 li 追加到 ul obj_ul.appendChild(obj_li); } // 将新建的 ul 追加到 body document.getElementsByTagName("body")[0].appendChild(obj_ul); // 在指定节点位置前追加一个元素 var new_li = document.createElement("li"); var new_text = document.createTextNode("广东"); new_li.setAttribute("id", "guangzhou"); new_li.appendChild(new_text); // 在指定位置追加 var obj_zj = document.getElementById("hangzhou"); document.getElementsByTagName("ul")[0].insertBefore(new_li, obj_zj); // 替换 document.getElementsByTagName("ul")[0].replaceChild(new_li, obj_zj);