DOMツリー内のDOM要素を置き換えるには、以下の手順に従います。
- まず、置き換えたいDOM要素を選択します。
- 次に、新しい要素を作成します。
- 最後に、ターゲット要素の親要素を選択し、`replaceChild()`メソッドを使用してターゲット要素を新しい要素に置き換えます。
以下のHTMLドキュメントを参照してください。
<html>
<head>
<title>Replace a DOM element</title>
</head>
<body>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/service">Service</a></li>
<li><a href="/about">About</a></li>
</ul>
<script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)最後のリスト項目要素を選択するには、上記の手順に従います。
まず、`querySelector()`メソッドを使用して最後のリスト項目を選択します。
const listItem = document.querySelector("li:last-child");Code language: JavaScript (javascript)次に、新しいリスト項目要素を作成します。
const newItem = document.createElement('li');
newItem.innerHTML = '<a href="/products">Products</a>';Code language: JavaScript (javascript)最後に、ターゲット要素の親を取得し、`replaceChild()`メソッドを呼び出します。
listItem.parentNode.replaceChild(newItem, listItem);Code language: CSS (css)出力は以下のようになります。
このチュートリアルは役に立ちましたか？
