编辑这个页面须要登录或更高权限!
HTML DOM允许JavaScript获取和更改HTML元素的内容。
更改HTML元素内容的最简单方法是使用innerHTML属性。
要更改HTML元素的内容,请使用以下语法:
element.innerHTML = text
以下示例使用id="para" 更改<p>元素的内容:
<!DOCTYPE html> <html> <p id="para"></p> <script> document.getElementById("para").innerHTML = "Hello world"; </script> </html>测试看看‹/›
下面的示例获取id="para"的<p>元素的内容:
<!DOCTYPE html> <html> <p id="para">This is a paragraph.</p> <p id="result"></p> <script> var x = document.getElementById("para").innerHTML; document.getElementById("result").innerHTML = x; </script> </html>测试看看‹/›
document.write()方法将文本字符串写入文档流。
<!DOCTYPE html> <html> <p>document.write()方法将文本字符串写入文档输出流:</p> <script> document.write(new Date()); </script> </html>测试看看‹/›
此方法仅在解析该文档时将内容写入当前文档。
如果在页面加载后使用此方法,它将覆盖该文档中的所有现有内容。
<button onclick="myFunc()">Click me</button> <script> function myFunc() { document.write(new Date()); } </script>测试看看‹/›
要更改HTML属性的值,请使用以下语法:
element.attribute = new value
下面的示例获取锚元素的href属性的值:
var x = document.getElementById("demo").href;测试看看‹/›
您可以使用document.createElement()方法在HTML文档中显式创建新元素。
此方法创建一个新元素,但不会将其添加到DOM中。您必须在一个单独的步骤中执行此操作:
// 创建一个新的h3元素 var newElem = document.createElement("h3"); // 并给它一些内容 var newContent = document.createTextNode("嗨,大家好!");
appendChild()方法将新元素添加到指定父节点的任何其他子节点的末尾。
// 将文本节点添加到新创建的h3 newElem.appendChild(newContent); // 将新创建的元素及其内容添加到DOM中 document.body.appendChild(newElem);测试看看‹/›
但是,如果要在其他任何子项的开头添加新元素,则可以使用该insertBefore()方法。
//创建一个新的h3元素 var newElem = document.createElement("h3"); // 给它一些内容 var newContent = document.createTextNode("Hi there and greetings!"); // 将文本节点添加到新创建的h3 newElem.appendChild(newContent); // Get the Body var body = document.body; // Insert H3 before the first child of the BODY body.insertBefore(newElem, body.childNodes[0]);测试看看‹/›
同样,您可以使用该removeChild()方法从DOM中删除子节点。
var div = document.getElementById("demo"); div.removeChild(div.firstElementChild);测试看看‹/›