1. 修改元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改内容</title>
</head>
<body>
<p id="myParagraph">原始内容</p>
<button οnclick="changeContent()">更改内容</button>
<script>
function changeContent() {
document.getElementById('myParagraph').innerText = '内容已更改！';
}
</script>
</body>
</html>
2. 添加新元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加元素</title>
</head>
<body>
<ul id="myList">
<li>项 1</li>
<li>项 2</li>
</ul>
<button οnclick="addItem()">添加项</button>
<script>
function addItem() {
const ul = document.getElementById('myList');
const li = document.createElement('li');
li.textContent = '新项';
ul.appendChild(li);
}
</script>
</body>
</html>
3. 删除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除元素</title>
</head>
<body>
<div id="container">
<p id="toDelete">这个段落将被删除。</p>
</div>
<button οnclick="removeElement()">删除元素</button>
<script>
function removeElement() {
const element = document.getElementById('toDelete');
element.remove();
}
</script>
</body>
</html>
4. 修改样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改样式</title>
</head>
<body>
<div id="myBox" style="width: 100px; height: 100px; background: red;"></div>
<button οnclick="changeStyle()">改变样式</button>
<script>
function changeStyle() {
const box = document.getElementById('myBox');
box.style.backgroundColor = 'blue';
box.style.width = '200px';
box.style.height = '200px';
}
</script>
</body>
</html>
扫一扫
876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
