dom元素的增删改查

创建dom元素 div, span
附加span到div列表中
用cloneNode(true)复制span到div中，以完整保留元素内部结构
<scrypt>
let div = document.createElement(“div”);
let span = document.createElement(“span”);
span.textContent = “Hello”;
div.append(span);
div.append(span, “ world”);
document.body.append(span.cloneNode(true), “ world”);
</scrypt>
添加ul items到body里面
const ul = document.createElement(“ul”);
for(let i = 1, i <= 5; i++) {
let li = document.createElement(“li”);
li.textContent = item${i};
li.style.color = “red”;
ul.append(li);
document.body.append(ul);
}
前置一个item-prepend
li = document.createElement(“li”);
li.textContent = “first item”;
li.style.color = blue;
ul.prepend(li);
中间位置添加,querySelector节点前后
const referNode = document.querySelector(“li:nth-of-type(4)”);
referNode.style.background = “lightblue”;
li = document.createElement(“li”);
li.textContent = “new content before”;
li.style.background = “yellow”;
referNode.before(li);
后:
li = document.createElement(“li”);
li.textContent = “new content after”;
li.style.background = “purple”;
referNode.after(li);
链接替换最后那个节点
let lastItem = document.querySelector(“ul li:last-of-type”);
let a = document.createElement(“a”);
a.textContent = “google”;
a.href = “http://www.google.com“;
lastItem.replaceWith(a);
删除节点
ul.querySelector(“:nth-of-type(6)”).remove();
插入4个邻近的元素insertAdjacentElement
- beforeBegin
- afterBefin
- beforeEnd
- afterEnd
  li = document.createElement(“li”);
  li.textContent = “the first child element”;
  ul.insertAdjacentElement(“afterbegin”, li); ul.insertAdjacentElement(“beforebegin”, li);
- 在结尾添加,用HTML
  ul.insertAdjacentHTML(“beforeEnd”, ‘<li style="color:red">the last child element</li>‘ );
- 直接插入文本
  const h2 = document.createElement(“h2”);
  h2.insertAdjacentText(“beforeend”, ul.lastElementChild.textContent);
  console.log(h2);
  document.body.insertAdjacentElement(“afterend”, h2);

更多相关文章

随机推荐