<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var $ = function(args){
return document.getElementById(args)
}
var add = $("add")
var rep = $("replace")
var rem = $("remove")
var dom, h
add.onclick = function(){
//新增
dom = document.createElement("p")
dom.innerHTML="<span style='color:red'> 这是一个被p标记包含的 span 标签</span>"
document.body.appendChild(dom)
}
rep.onclick = function(){
//替换
h = document.createElement("h1")
h.innerHTML="<span style='color:green'> 这是一个被h1标记包含的 span 标签</span>"
document.body.replaceChild(h,dom)
dom = null
}
rem.onclick = function(){
//删除
if(dom){
document.body.removeChild(dom)
}else if(h){
document.body.removeChild(h)
}
}
}
</script>
</head>
<body>
<input type="button" value="新增" id="add"/>
<input type="button" value="替换" id="replace"/>
<input type="button" value="删除" id="remove"/>
</body>
</html>
使用JavaScript *** 作页面内容（DOM）可以通过以下方法实现：
1、添加: 可以使用JavaScript中的document.createElement()方法来创建新的元素，然后使用appendChild()或者insertBefore()方法将其添加到页面中。
// 创建新的段落元素
var newP = document.createElement("p")
// 为段落赋值
newP.innerHTML = "这是新添加的段落"
// 找到需要添加新元素的父元素
var parent = document.getElementById("myDiv")
// 将新元素添加到父元素中
parent.appendChild(newP)
2、修改: 可以使用JavaScript中的getElementById()或者getElementsByTagName()方法来获取页面中的元素，然后使用innerHTML或者innerText属性来修改其中的内容。
// 通过id获取需要修改的元素
var myP = document.getElementById("myP")
// 修改元素的内容
myP.innerHTML = "这是修改后的段落"
3、删除: 可以使用JavaScript中的removeChild()或者remove()方法来删除页面中的元素
// 通过id获取需要删除的元素
var myP = document.getElementById("myP")
// 找到父元素
var parent = myP.parentNode
// 从父元素中删除该元素
parent.removeChild(myP)
这是一种简单的方法，在实际应用中，使用JavaScript对页面进行 *** 作还需要考虑到很多的因素，如浏览器兼容性、性能优化等。最好使用一些框架或库来帮助我们简化这些 *** 作，例如jQuery、React、Vue等。总之，通过熟练掌握JavaScript和相关框架或库的使用，可以有效地 *** 作页面内容并实现丰富的交互效果。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）