JavaScript DOM 操作创建和追加节点

我与梦想有个约会

发布于 2023-10-20 19:35:51

1580

发布于 2023-10-20 19:35:51

文章被收录于专栏：jiajia_deng

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);