修改添加删除

修改元素

 

function fun(){
  //获取到指定元素
  var p1 = document.getElementById("p1");
  p1.innerText = "我被单击了！";
}
通过.innerText属性可读取或设置标签的内容文本
 
function fun(){
  //获取到指定元素
  var p1 = document.getElementById("p1");
  p1.innerHTML = "我被单击了！<br>换行了";
}
也可以通过innerHTML属性获取或设置内容文本
 

（1）  修改样式

A．xxx．style.属性名=“值”

B．xxx．classname=“…”(相当于修改了class的属性)

<style>
    .style1{
      color:red;
      font-size:20px;
      text-decoration:underline;
    }
    .style2{
      color:blue;
      font-size:32px;
      text-decoration:line-through;
    }
  </style>
</head>
<body>
<p id="p1">修改样式测试</p>
<input type="button"value="样式一"onclick="style1()">
<input type="button"value="样式二"onclick="style2()">
</body>
<script>
  var p1 = document.getElementById("p1");
  function style1(){
    p1.className = "style1"
  }
  function style2(){
    p1.className = "style2"
  }
</script>
</html>
 
CreateElement建一个元素节点
 
createTextNode创建一个文本节点

appendChild添加子节点

removeChild  删除子节点

 

<body>
<div id="div1">
</div>
<input type="button"value="添加段落"onclick="add()">
</body>
<script>
//全局变量
  var index = 1; //设置一个变量好区分一共创建了几次
  function add(){
    //创建一个段落标签
    var p = document.createElement("p");
    //创建文本节点
    var content= "第"+index+"段落";
    var txt = document.createTextNode(content);
    //创建文本节点添加的段落
    p.appendChild(txt);
    //将段落添加到div中
    var div1 = document.getElementById("div1");
    div1.appendChild(p);
    index++ //代表第几次
  }
</script>
 
<body>
<div id="div1">
  <p id="p1">第1段落 </p>
  <p id="p2">第2段落 </p>
  <p id="p3">第3段落 </p>
  <p id="p4">第4段落 </p>
</div>
<input type="button"value="删除第二段"onclick="del()">
</body>
<script>
  function del(){
    //先找到父节点
    var div1 = document.getElementById("div1");
    //再找到要删除的节点
    var p2 = document.getElementById("p2");
    //将要删除的节点从父节点中移除
    div1.removeChild(p2);
  }
</script>
</html>
posted @ 2019-08-31 15:10  石舟丿  阅读(207)  评论(0)    收藏  举报