Bạn có thể thay đổi thuộc tính của phần tử [kiểu], chèn HTML vào phần tử hoặc chèn/tạo phần tử mới ở những vị trí cụ thể
Thay đổi thuộc tính của phần tử
Bạn có thể thay đổi thuộc tính của các yếu tố cụ thể. Để thay đổi thuộc tính của phần tử, trước tiên bạn lấy phần tử đó, đặt nó làm biến, sau đó sử dụng phương thức setAttribute để thay đổi thuộc tính của phần tử. Đây là một ví dụ
//get the element
var contentSubhead = document.getElementById["contentSubhead"];
//set an attribute for the element
var .contentSubhead.setAttribute["align","right"];Phương thức setAttribute có hai giá trị. Trước tiên, bạn liệt kê tên của thuộc tính mà bạn muốn thay đổi, sau đó bạn liệt kê giá trị
Áp dụng kiểu
Bạn cũng có thể áp dụng kiểu trực tiếp cho các phần tử. Tuy nhiên, vì JavaScript không sử dụng dấu gạch nối hoặc dấu gạch dưới, tên kiểu CSS thường được gạch nối [như background-color trở thành một từ có viết hoa lạc đà.
//set the title ID as a variable
var title = document.getElementByID["title"];
//apply a new width to the title
title.style.backgroundColor = "#dedede";
}Để áp dụng kiểu nội tuyến cho một phần tử, hãy sử dụng định dạng sau
//set the title ID as a variable
var title = document.getElementByID["title"];
//apply a new width to the title
title.style.backgroundColor = "#dedede";
}Thay đổi nội dung của một phần tử
Để thay đổi nội dung thực sự của một phần tử, bạn sử dụng phương thức
//set the title ID as a variable
var title = document.getElementByID["title"];
//apply a new width to the title
title.style.backgroundColor = "#dedede";
}Bạn có thể xem HTML bên trong của một phần tử bằng cách chạy bảng điều khiển này. thông báo nhật ký trong Fireorms
//set the contentSubhead ID as a variable
var contentSubhead = document.getElementById["contentSubhead"];
//see what the inner HTML contains
console.log[contentSubhead.innerHTML]; Nội dung được tài trợ
Câu lệnh trước cho phép bạn xem HTML bên trong. Để thay đổi HTML bên trong, hãy sử dụng câu lệnh như thế này
//set the ID as a variable
var contentSubhead = document.getElementById["contentSubhead"];
//change the inner HTML to this new string.
contentSubhead.innerHTML = "The new text for the element...";Thêm các yếu tố mới
Bạn cũng có thể chèn một phần tử hoàn toàn mới vào DOM. Để chèn một phần tử mới, hãy làm theo hai bước sau
- Tạo phần tử
- Thêm phần tử mới vào DOM
Bạn tạo một phần tử mới bằng cách sử dụng phương thức
//set the title ID as a variable
var title = document.getElementByID["title"];
//apply a new width to the title
title.style.backgroundColor = "#dedede";
}//create a new h2 element called sideHead
var sideHead = document.createElement["h2"];Khi bạn tạo phần tử, bây giờ bạn cần nối nó vào đâu đó. Để nối thêm phần tử mới, hãy sử dụng phương thức
//set the title ID as a variable
var title = document.getElementByID["title"];
//apply a new width to the title
title.style.backgroundColor = "#dedede";
}//create a new h2 element called sideHead
var sideHead = document.createElement["h2"];
//add new inner HTML for sideHead
sideHead.innerHTML = "Did you know?";
//append the sideHead element to the sidebar ID section
document.getElementById["sidebar"].appendChild[sideHead];Có một phương pháp khác để chèn một phần tử mới. Thay vì tạo InternalHTML mới để chèn, bạn có thể chèn một nút văn bản mới bằng cách sử dụng phương thức
//set the title ID as a variable
var title = document.getElementByID["title"];
//apply a new width to the title
title.style.backgroundColor = "#dedede";
}//create a new p element called newSection
var newSection = document.createElement["p"];
//create a new text node called pText
var pNewText = document.createTextNode["Did you know?"];
//append the new text node on the newSection element
newSection.appendChild[pNewText];
//insert the text node into the newSection section
document.getElementById["sidebar"].appendChild[newSection];Câu lệnh này sẽ nối thêm nút văn bản mới được tạo [_______1_______5] vào phần tử đoạn văn
//set the title ID as a variable
var title = document.getElementByID["title"];
//apply a new width to the title
title.style.backgroundColor = "#dedede";
}