English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JavaScript Grundtutorials

JavaScript Objekt

JavaScript Funktion

JS HTML DOM

JS Browser BOM

AJAX Grundtutorials

JavaScript Referenzhandbuch

JS-DOM-Änderung-HTML-Inhalt

HTML DOM ermöglicht es JavaScript, den Inhalt von HTML-Elementen zu erhalten und zu ändern.

Ändern Sie den HTML-Inhalt

Der einfachste Weg, den Inhalt eines HTML-Elements zu ändern, istinnerHTMLEigenschaft.

Um den Inhalt eines HTML-Elements zu ändern, verwenden Sie die folgende Syntax:

element.innerHTML = text

Nachfolgender Beispiel verwendetid="para" 更改<p>元素的内容：

<!DOCTYPE　html>
<html>
<p id="para"></p>
<script>
document.getElementById("para").innerHTML　=　"Hello　world";
</script>
</html>
Testen Sie heraus‹/›

下面的示例获取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>
Testen Sie heraus‹/›

改变输出流

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

<!DOCTYPE　html>
<html>
<p>document.write()方法将文本字符串写入文档输出流:</p>
<script>
document.write(new　Date());
</script>
</html>
Testen Sie heraus‹/›

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

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

<button　onclick="myFunc()">Click　me</button>
<script>
function　myFunc()　{
　　document.write(new　Date());
}
</script>
Testen Sie heraus‹/›

更改属性的值

要更改HTML属性的值，请使用以下语法：

element.attribute　=　new　value

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

单击按钮更改头像：

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

var　x　=　document.getElementById("demo").href;
Testen Sie heraus‹/›

向DOM添加新元素

您可以使用document.createElement()方法在HTML文档中显式创建新元素。

此方法创建一个新元素，但不会将其添加到DOM中。您必须在一个单独的步骤中执行此操作：

　　//　Erstellen Sie ein neues h3Element
　　var newElem = document.createElement("h3");
　　//　并给它一些内容
　　var　newContent　=　document.createTextNode("嗨，大家好!");

appendChild()方法将新元素添加到指定父节点的任何其他子节点的末尾。

//　Fügen Sie einen Textknoten zum neu erstellten h hinzu3
newElem.appendChild(newContent);　　
//　将新创建的元素及其内容添加到DOM中
document.body.appendChild(newElem);
Testen Sie heraus‹/›

但是，如果要在其他任何子项的AnfangUm einen neuen Element hinzuzufügen, können Sie die folgende verwendeninsertBefore()Methode.

//Erstellen Sie ein neues h3Element
var newElem = document.createElement("h3");
//　Geben Sie ihm etwas Inhalt
var newContent = document.createTextNode("Hi there and greetings!");
//　Fügen Sie einen Textknoten zum neu erstellten h hinzu3
newElem.appendChild(newContent);　　
//　Körper erhalten
var body = document.body;
//　Einfügen von H3　vor dem ersten Kind des KÖRPER
body.insertBefore(newElem, body.childNodes[0]);
Testen Sie heraus‹/›

Um ein bestehendes Element aus dem DOM zu entfernen

Gleichzeitig können Sie auch die folgende verwendenremoveChild()Methode, um ein Kind aus dem DOM zu entfernen.

var div = document.getElementById("demo");
div.removeChild(div.firstElementChild);
Testen Sie heraus‹/›
JS-DOM-Änderung-CSSJS-HTML-DOM-Selektor