JavaScriptはHTML要素と様式を操作する方法を詳しく説明します.

JavaScript HTML DOM要素(ノード)は、HTML DOMに新しい要素を追加する場合、まずこの要素(元素ノード)を作成し、既存の要素に要素を追加してください. 実例

This is a paragraph.
This is another paragraph.



var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);

例解析:このコードは新しい要素を作成します.

var para=document.createElement("p");

要素にテキストを追加するには、まずテキストノードを作成しなければなりません.このコードはテキストノードを作成しました.

var node=document.createTextNode("This is a new paragraph.");

このテキストノードを要素に追加する必要があります.

para.appendChild(node);

最後に既存の要素にこの新しい要素を追加してください.このコードは既存の要素を見つけました.

var element=document.getElementById("div1");

以下のコードは既に存在する要素の後に新しい要素を追加します.

element.appendChild(para);

既存のHTML要素のこのコードを削除して、この既存の要素に新しい要素を追加します.例

This is a paragraph.
This is another paragraph.


var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

このHTML文書には、2つのサブノード(2つの要素)を持つ要素が含まれています.

This is a paragraph.
This is another paragraph.

ID=「div 1」の要素が見つかりました.

var parent=document.getElementById("div1");

ID=「p 1」の要素が見つかりました.

var child=document.getElementById("p1");

親要素からサブ要素を削除:

parent.removeChild(child);

lamp 親の要素を引用せずに、ある要素を削除できるといいですね.残念です.DOMは削除する要素とその親要素を明確にする必要があります.これはよく使われている解決策です.削除したいサブ要素を見つけて、そのparent Node属性を使って親要素を見つけます.

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

JavaScript HTML DOM-CSS HTML DOMを変更すると、JavaScriptがHTML要素のスタイルを変更することができます.HTMLスタイルを変更したいなら、HTML要素のスタイルを変えてください.この文法を使ってください.document.getElement ById(id).style.property=new styleの下の例では、要素のスタイルが変わります.例:

Hello World!


document.getElementById("p2").style.color="blue";


The paragraph above was changed by a script.

この例では、ID="id 1"のHTML要素のスタイルが変更されました.ユーザがボタンをクリックした時:例

My Heading 1

Click Me!