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. 【iOS】FMDB/SQLCipher数据库加解密,迁移

    2016-04-19更新:本文代码可能有些问题,请移步 http://zhengbomo.github.io/2016-04-18/sqlcipher-start/ 查看 sqlite应用几乎在所有的 ...

  2. Jquery:ajax跨域请求处理

    昨天朋友想做个图片懒加载的效果,朋友是前端的,我这边给他提供数据,程序写好了放到服务器上,本地测试访问时却报jquery跨域的问题,于是找度娘了解了一下jquey如何处理,网上有很多参考文章,但没细看 ...

  3. jQuery中的动画与特效

    1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏. <script type="text/javascript&q ...

  4. knockout的依赖属性dependentObservable的参数 和Value转换器

    可写的依赖监控属性ko.dependentObservable的参数 read:   必选,一个用来执行取得依赖监控属性当前值的函数write:  可选,如果声明将使你的依赖属性可写,别的代码如果这个 ...

  5. 重新想象 Windows 8 Store Apps (57) - 本地化和全球化

    [源码下载] 重新想象 Windows 8 Store Apps (57) - 本地化和全球化 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 本地化和全球化 本地化 ...

  6. Studio for ASP.NET Wijmo:使用 C1Pager 对 DataList 控件分页

    Studio for ASP.NET Wijmo 控件值得称赞的一点是它不仅仅单独为 C1 控件而开发.还可以配合其他控件使用,也正体现了C1控件为提高开发人员工作效率而设计的宗旨.简单的举一个例子, ...

  7. Delphi的几个跨平台小游戏例子。

    Embarcadero开源了几个FireMonkey的小游戏,支持Windows, Android,Ios, MacOS等. 源码地址: https://github.com/EmbarcaderoP ...

  8. oauth授权协议的原理

    http://oauth.net/2/ 协议的原文.原来是1.0版本,现在是2.0版本了 https://ruby-china.org/topics/15396 https://blog.yorkxi ...

  9. 用构造函数创建对象时的this的指向问题

    用构造函数方式创建对象: function Person(name,age){ this.name=name; this.age=age; this.sayname=function(){ alert ...

  10. 精简CSS代码

    精简CSS代码可以帮助减小样式文件的大小,使代码清晰,方便维护. 使用简写属性及默认值 .header { margin-top: 10px; margin-right: 20px; margin-b ...