js追加元素,以及元素位置

本文介绍如何使用JavaScript动态创建并插入DOM元素到指定位置,包括使用appendChild和insertAdjacentHTML方法的区别及其应用场景。

 

 

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>   

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值