zoukankan      html  css  js  c++  java
  • js追加元素,以及元素位置

    function setShow(val_param,text){
        var ul = document.getElementById("copyhere");
        
        //<li><input name="ytname_cp" type="checkbox" value="bhsc"/> 百货商场</li>//我想要追加的代码效果
        var li         = document.createElement("li");
        var input     = document.createElement("input");
          input.setAttribute("type", "checkbox"); 
          input.setAttribute("name", "ytname_cp");
          input.setAttribute("value", "val_param");
      
       li.insertAdjacentHTML("beforeend", text); li.insertAdjacentHTML("afterbegin", '
    <input name="Fruit" type="checkbox" >'); //li.appendChild(input); //这句话能追加元素,但不能调整位置 ul.appendChild(li); } </script>

    以下是两种追加代码的位置显示效果,

    代码1:
    li.appendChild(input); //这句话能追加元素,但不能调整位置

    代码2:
    li.insertAdjacentHTML("afterbegin", '<input name="Fruit" type="checkbox" >')

    位置代码4个参数

     1 <html>  
     2  <head>  
     3  <title>24.htm insertAdjacentHTML插入新内容</title>  
     4  <script language="jscript">
     5  function addsome()  
     6  {  
     7      document.all.paral.insertAdjacentHTML("afterBegin","<h1> 在文本 前容器内 插入内容2</h1>");  
     8      document.all.paral.insertAdjacentHTML("beforeEnd","<h2> 在文本 后容器内 插入内容3</h2>");  
     9      document.all.paral.insertAdjacentHTML("beforeBegin","<h4> 在文本 前容器外 插入内容1</h1>");  
    10      document.all.paral.insertAdjacentHTML("afterEnd","<h5> 在文本 后容器外 插入内容4</h2>");  
    11  }  
    12    
    13 </script>  
    14  </head>  
    15  <body onload="addsome()">  
    16  <div id="paral" style="fontsize:6;color='#ff00ff'" mce_style="fontsize:6;color='#ff00ff'">原来的内容</div><hr>  
    17  </body>  
    18  </html>   

  • 相关阅读:
    点赞
    js点击事件,数字累加
    html中hr的各种样式使用
    基于Bootstrap垂直响应的jQuery时间轴特效
    bootstrop日历
    前端经验
    bootstrop登陆页面
    bootstrop设置背景图片自适应屏幕
    建立博客的第一天
    php伪静态--隐藏地址实际路径方法
  • 原文地址:https://www.cnblogs.com/xiaoliu66007/p/4876921.html
Copyright © 2011-2022 走看看