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个参数

 <html>

  <head>

  <title>24.htm insertAdjacentHTML插入新内容</title>

  <script language="jscript">

  function addsome()

  {

      document.all.paral.insertAdjacentHTML("afterBegin","<h1> 在文本 前容器内 插入内容2</h1>");

      document.all.paral.insertAdjacentHTML("beforeEnd","<h2> 在文本 后容器内 插入内容3</h2>");

      document.all.paral.insertAdjacentHTML("beforeBegin","<h4> 在文本 前容器外 插入内容1</h1>");

      document.all.paral.insertAdjacentHTML("afterEnd","<h5> 在文本 后容器外 插入内容4</h2>");

  }  

 </script>

  </head>

  <body onload="addsome()">

  <div id="paral" style="fontsize:6;color='#ff00ff'" mce_style="fontsize:6;color='#ff00ff'">原来的内容</div><hr>

  </body>

  </html>

js追加元素，以及元素位置的更多相关文章

  1. js追加子元素

    在页面加载完毕后,向div元素追加span子元素 <html><head><title>js</title><script type=" ...

  2. js追加元素

    直接运行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  3. 找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分

    找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...

  4. 深入学习jQuery元素尺寸和位置操作

    × 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...

  5. selenium自动化之js处理滚动条和元素聚焦

    selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 当我们页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接操作的,会报元素不可见异常的.这时候需要借助滚动 ...

  6. JS数组去掉重复元素

    JS数组去掉重复元素,这里提供3中写法. var arr =[1,2,3,4,5,6,3,4,7,2,4,1,8]; 输出:[1,2,3,4,5,6,7,8]; 1.使用indexOf() arr.i ...

  7. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  8. js，jq新增元素 ，on绑定事件无效

    在jquery1.7之后,建议使用on来绑定事件. $('.upload a').on('click',function(){ $(this).remove(); }) 在DOM渲染的时候,也就是ht ...

  9. JS魔法堂：元素克隆、剪切技术研究

    一.前言 当需要新元素时我们可以通过 document.createElement 接口来创建一个全新的元素,也可以通过克隆已有元素的方式来获取一个新元素.而在部分浏览器中,通过复制来获取新元素的效率 ...

  10. 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

    单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i>&l ...

随机推荐

  1. MVC应用程序结构与规划

    对MVC好长一段时间练习,说句实在的话,还有很多是感到陌生,很多是生疏...... 很多网友也是刚想学习MVC,看到Insus.NET每学习一种方法,一个技巧均写成博文,也很希望能获取到练习的源程序以 ...

  2. Netty学习之服务器端创建

    一.服务器端开发时序图 图片来源:Netty权威指南(第2版) 二.Netty服务器端开发步骤 使用Netty进行服务器端开发主要有以下几个步骤: 1.创建ServerBootstrap实例 Serv ...

  3. sqlsever备份，还原和导入导出方法

    一:sqlsever数据库的几种备份和还原方法: 第一种:备份还原方法 1.选择要备份的数据库-任务-备份- 打开之后会看到里面有: 常规:在常规页面中我们可以看到:右下角位置有一个可以更改存储(备份 ...

  4. wget进行整站下载

    wget加上参数之后,即可成为相当强大的下载工具. wget -r -p -np -k http://xxx.com/abc/ -r,  --recursive(递归)          specif ...

  5. Unity中启动VS时出现"Visual Studio 2010 Shell 无效的许可证数据"的解决办法

    (感觉还是cnblog好一点,刚注册成功赶紧把baidu hi的一篇文章搬过来试试) 一直用着Visual Studio 2013给Unity写代码,安装了SQL Server 2014后,在Unit ...

  6. servlet中的转发和重定向问题

    重定向和请求转发在学习servlet的时候很容易混淆,故在此特意记录. 1. 重定向---------sendRedirect()方法 Servlet响应请求有两种方式,一个是重定向,返回一个页面给客 ...

  7. postgresql 9.6 rc1发布

    postgresql 9.6 rc1发布了,意味着postgresql 9.6正式版将会越来越近了. 对于dss来说,postgresql远优于mysql,尤其是9.6新引入的并行执行,将大大提高性能 ...

  8. mysql ALL_O_DIRECT引发的unaligned AIO/DIO导致hang

    公司内部有一套mysql环境,使用的是percona server分支(和其他几十套环境的版本.参数完全相同),就这套环境每隔两三天就会hang一次,关键hang的时候服务器cpu也就是百分之三四十, ...

  9. DOM笔记整理及应用实例

    一.前言 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树 通过可编程的对象模型,JavaScript 获得了足够的 ...

  10. C++ Const（常类型）的作用总结

    C++ Const的作用总结 面试或者工作中,我们经常遇到const修饰符定义的变量,函数和对象等.那么const的作用具体是什么,有哪些.今天自己好好的总结了一下,记录下来方便自己以后时间久了不记得 ...