js追加输出到html,JS DOM 改变HTML内容

JS DOM 改变HTML内容

HTML DOM允许JavaScript获取和更改HTML元素的内容。

更改HTML内容

更改HTML元素内容的最简单方法是使用innerHTML属性。

要更改HTML元素的内容，请使用以下语法：element.innerHTML = text

以下示例使用id="para"更改

元素的内容：

示例html>

document.getElementById("para").innerHTML = "Hello world";

测试看看‹/›

下面的示例获取id="para"的

元素的内容：

示例html>

This is a paragraph.

var x = document.getElementById("para").innerHTML;

document.getElementById("result").innerHTML = x;

测试看看‹/›

改变输出流

示例html>

document.write()方法将文本字符串写入文档输出流:

document.write(new Date());

测试看看‹/›

此方法仅在解析该文档时将内容写入当前文档。

如果在页面加载后使用此方法，它将覆盖该文档中的所有现有内容。

示例Click me

function myFunc() {

document.write(new Date());

}

测试看看‹/›

更改属性的值

要更改HTML属性的值，请使用以下语法：element.attribute = new value

下面的示例更改元素的src属性的值：

男女

单击按钮更改头像：

下面的示例获取锚元素的href属性的值：

示例var x = document.getElementById("demo").href;测试看看‹/›

向DOM添加新元素

此方法创建一个新元素，但不会将其添加到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]);测试看看‹/›

从DOM中删除现有元素

同样，您可以使用该removeChild()方法从DOM中删除子节点。

示例var div = document.getElementById("demo");

div.removeChild(div.firstElementChild);测试看看‹/›