当前位置：首页 > JavaScript

js实现修改

2026-03-14 23:53:48JavaScript

修改DOM元素内容

使用innerHTML或textContent直接修改元素内容：

document.getElementById("elementId").innerHTML = "新内容";  
document.querySelector(".class").textContent = "纯文本内容";

修改元素样式

通过style属性调整CSS：

const element = document.getElementById("elementId");  
element.style.color = "red";  
element.style.fontSize = "20px";

或批量修改样式：

Object.assign(element.style, {  
  backgroundColor: "blue",  
  padding: "10px"  
});

修改元素属性

使用setAttribute或直接属性赋值：

element.setAttribute("data-id", "123");  
element.className = "new-class";  // 替换所有类名  
element.classList.add("active");  // 添加类名

修改表单值

针对input、select等表单元素：

document.getElementById("inputField").value = "新值";  
document.querySelector("select").selectedIndex = 2;

动态创建/替换元素

通过createElement和appendChild等API操作：

const newElement = document.createElement("div");  
newElement.textContent = "动态创建";  
document.body.appendChild(newElement);  

// 替换元素  
const oldElement = document.getElementById("old");  
oldElement.parentNode.replaceChild(newElement, oldElement);

修改事件监听器

添加或移除事件：

element.addEventListener("click", handleClick);  
element.removeEventListener("click", handleClick);

使用现代API批量修改

DocumentFragment高效批量操作：

js实现修改

const fragment = document.createDocumentFragment();  
for (let i = 0; i < 10; i++) {  
  const item = document.createElement("li");  
  item.textContent = `项目 ${i}`;  
  fragment.appendChild(item);  
}  
document.getElementById("list").appendChild(fragment);

标签: js