操作标签文本；增加删除节点
innerHtml 操作双标签中间的HTML
innerText 操作双标签中间的 Text
value 操作表单标签值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
<script>
function fun1(){
var element1=document.getElementById("d1");
/*
* innerText 不包含HTML结构
* innerHTML 包含HTML结构
* */
console.log("innerText>>>"+element1.innerText);
console.log("innerHTML>>>"+element1.innerHTML);
var element2=document.getElementById("i1");
console.log(element2.value)
}
function fun2(){
var element1=document.getElementById("d1");
//element1.innerText="<h1>一刻也不能分割</h1>"
element1.innerHTML="<h1>一刻也不能分割</h1>"
var element2=document.getElementById("i1");
element2.value="无论我走到哪里";
}
</script>
</head>
<body>
<div id='d1'>
a
<span>文字</span>
b
</div>
<input type="text" value="我和我的祖国" id='i1' />
<input type="button" value="获取内容" onclick="fun1()"/>
<input type="button" value="修改内容" onclick="fun2()"/>
</body>
</html>
创建元素createElement()
增加元素appendChild()
删除元素removeChild()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
border: 1px solid red;
width: 80%;
height: 200px;
}
</style>
<script>
function fun1(){
var div1=document.getElementById("d1");
// 通过JS创建标签
var in1=document.createElement("input");
in1.setAttribute("type","text");
in1.setAttribute("value","请输入内容");
var in2=document.createElement("input");
in2.setAttribute("type","password");
in2.setAttribute("value","123456789");
var in3=document.createElement("input");
in3.setAttribute("type","button");
in3.setAttribute("value","删除");
var br=document.createElement("br");
in3.onclick=function (){
div1.removeChild(in1)
div1.removeChild(in2)
div1.removeChild(in3)
div1.removeChild(br)
}
div1.appendChild(in1);
div1.appendChild(in2);
div1.appendChild(in3);
div1.appendChild(br);
}
</script>
</head>
<body>
<div id="d1">
</div>
<input type="button" value="增加" onclick="fun1()" />
</body>
</html>
分类:
javaScriptwei
标签:
javaScript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了