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>