【html5】04-操作DOM元素
<!DOCTYPE html>
<html>
<head>
<title>操作DOM元素</title>
<script>
function changeText() {
var myElement = document.getElementById("myElement");
myElement.textContent = "这是新的文本内容";
}
function addElement() {
var myList = document.getElementById("myList");
var newItem = document.createElement("li");
newItem.textContent = "新添加的列表项";
myList.appendChild(newItem);
}
function removeElement() {
var myList = document.getElementById("myList");
var lastItem = myList.lastElementChild;
myList.removeChild(lastItem);
}
</script>
</head>
<body>
<h1 id="myElement">这是一个段落。</h1>
<button onclick="changeText()">改变文本</button>
<h2>列表示例</h2>
<ul id="myList">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<button onclick="addElement()">添加元素</button>
<button onclick="removeElement()">移除元素</button>
</body>
</html>这个示例代码展示了如何通过JavaScript操作HTML元素。在这个例子中，我们有一个<h1>元素和一个按钮。当按钮被点击时，changeText函数会被调用，这会改变<h1>元素的文本内容。同时，我们还展示了如何添加和删除列表项。这些操作都是通过获取元素，然后使用相应的DOM方法来实现的。
评论已关闭