兄弟要素の追加(insertBefore)

親要素.insertBefore(追加要素,基準要素)
以下のボタンをクリックするとidから要素を取得しspan要素を取得し兄弟要素を作成する例を示します。
ボタンを押す前

子要素の追加(appendChild)

親要素.appendChild(追加要素)
以下のボタンをクリックするとidから要素を取得し子要素の末尾に子要素(li)を追加します。

要素の削除(removeChild)

親要素.removeChild(削除要素)
以下のボタンをクリックするとidから要素を取得しその兄要素を削除します。
  • 1
  • 2
  • 3

要素をDIVで囲む(outerHTML)

element.outerHTML="<div>"+element.outerHTML+"</div>"
以下のボタンをクリックするとidから要素を取得し新規に作成したdiv要素で囲みます。

要素をHTMLで書き換える(innerHTML)

element.innerHTML
以下のボタンをクリックするとidから要素を取得しspan要素にHTMLを設定する例を示します。

要素をテキストで書き換える(innerText)

element.innerHTML
以下のボタンをクリックするとidから要素を取得しspan要素にテキストを設定する例を示します。

img要素の追加・属性の設定(createElement)

document.createElement("img");
以下のボタンをクリックするとidから親要素を取得しimg要素を子要素の末尾に追加する例を示します。

属性の取得・設定(setAttribute,getAttribute)

element.setAttribute("属性名",値);
element.getAttribute("属性名");
何色?

以下のボタンをクリックするとidから要素を取得しfontのcolor属性を取得します。
※fontはHTML5では廃止されています。

XML文章のシリアライズ(serializeToString)

element.setAttribute("属性名",値);
element.getAttribute("属性名");
以下のボタンをクリックするとidから要素を取得しテキスト化（XMLをシリアライズ）してid13(ソースコードの後ろ)に出力します。
  • 1
  • 2
  • 3