zoukankan      html  css  js  c++  java
  • js,javascript,删除元素,创建元素,插入子元素

    删除元素示例代码

    <html>
    <head>
    </head>
    <body>
    <div>
    <div id="delId"><h3>js删除元素之div及其内容</h3><p>这是段落内容</p></div>
    
    </div>
    <button onclick="fun()">删除div</button>
    <script>
    function fun(){
    //删除div
     var obj = document.getElementById("delId");
      var parentObj = obj.parentNode;//获取div的父对象
      parentObj.removeChild(obj);//通过div的父对象把它删除
    }
    </script>
    </body>
    </html>

    追加元素代码示例

    <html>
    <head>
    <title> new document </title>
    <meta name="generator" content="editplus">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="description" content="">
    </head>
    <SCRIPT LANGUAGE="JavaScript">
    window.onload = function (){
    inp.onclick = function(){
    var inp = document.getElementById("list").getElementsByTagName('li')[2];  //在第三个li后面插入一个li
    var div = document.createElement("li"); //创建一个li
    div.style.cssText = "100px;height:100px;border:1px solid red;";  //设置style
    //div.id = 'id1';  //赋值id
    inp.parentNode.insertBefore(div,inp.nextSibling)  //传入参数执行
    }
    }
    </SCRIPT>
    <body>
    <input type="submit" id="inp" value="添加div" />
    <ul id="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    </body>
    </html>

    插入子元素代码示例

    <html>
    <head>
    <title> new document </title>
    <meta name="generator" content="editplus">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <meta name="description" content="">
    </head>
    <ul id="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <body>
    <script language="javascript"> 
    var o = document.getElementById('list').children[2];   
    //创建链接 
    function createA(url,text) 
    { 
    var a = document.createElement("a"); 
    a.href = url; 
    a.innerHTML = text; 
    a.style.color = "red"; 
    o.appendChild(a); 
    } 
    createA("http://www.***.com/","插入子元素"); 
    </script> 
    
    <script language="javascript"> 
    var o = document.getElementById('list').children[1];
    //创建DIV 
    function createDIV(text) 
    { 
    var div = document.createElement("div"); 
    div.innerHTML = text; 
    o.appendChild(div); 
    } 
    createDIV("插入子元素");    
    </script>
    </body>
    </html>
  • 相关阅读:
    责任链简单解析
    mysql实践一:SQL基础
    Aix6.1下su命令不能切换环境变量的问题
    maven 打包错误 Cannot access central in offline mode
    登陆并访问k8s的apiserver
    kubernetes 实践五:Service详解
    kubernetes1.16 配置 metrics-server
    kubernetes 实践四:Pod详解
    kubernetes 实践三:使用kubeadm安装k8s1.16.0
    kubernetes 实践二:kubectl命令使用
  • 原文地址:https://www.cnblogs.com/fan-bk/p/8214805.html
Copyright © 2011-2022 走看看