<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片上传本地预览</title>

<script type="text/javascript">

function aa(){
var header1 = document.getElementById("header");
var p = document.createElement("p"); // 创建一个元素节点
insertAfter(p,header1); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法
}

function insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置
var parent = targetElement.parentNode; // 找到指定元素的父节点
if( parent.lastChild == targetElement ){ // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
parent.appendChild( newElement, targetElement );
}else{
parent.insertBefore( newElement, targetElement.nextSibling );
};
};
</script>
</head>
<body>
<div id="header" class='preview'>附加赛开发和沙回复</div>
<div onclick='aa()'>加p</div>
</body>
</html>

js添加元素代码的更多相关文章

  1. 网络问卷调查js实现代码

    昨天一个同行妹纸写了一个网络问卷调查的效果,但是有bug,于是就来问我该如何解决这个bug.经过我的分析,bug主要还是出在复选框的那部分,经过修改,bug问题解决,现在贴出如下代码,仅供大家参考: ...

  2. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  3. 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验

    转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...

  4. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  5. SpringMVC学习系列-后记 结合SpringMVC和Hibernate-validator，根据后台验证规则自动生成前台的js验证代码

    在SpringMVC学习系列(6) 之 数据验证中我们已经学习了如何结合Hibernate-validator进行后台的数据合法性验证,但是通常来说后台验证只是第二道保险,为了更好的用户体验会现在前端 ...

  6. 响应式js幻灯片代码一枚

    网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...

  7. ASP.Net MVC4中封装CSS和js冗余代码（不让其大篇的显示在前台上）

    (1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用.   由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...

  8. 使用正则表达式匹配JS函数代码

    使用正则表达式匹配JS函数代码 String someFunction="init"; Pattern regex = Pattern.compile("function ...

  9. JS倒计时 代码

    JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...

随机推荐

  1. 编写Java程序，使用ThreadLocal类，项目中创建账户类 Account，类中包括账户名称name、 ThreadLocal 类的引用变量amount，表示存款

    查看本章节 查看作业目录 需求说明: 某用户共有两张银行卡,账户名称相同,但卡号和余额不同.模拟用户使用这两张银行卡进行消费的过程,并打印出消费明细 实现思路: 项目中创建账户类 Account,类中 ...

  2. Java面向对象笔记 • 【第8章 内部类和泛型】

    全部章节   >>>> 本章目录 8.1 内部类 8.1.1 内部类概述 8.1.2 内部类使用 8.1.3 实践练习 8.2 静态内部类 8.2.1 静态内部类的实现 8.2 ...

  3. linux下备份mysql数据

    一.业务场景 自己现在做的项目基本上已经开发完成,正式开始上线运行,主要包含两个子项目一个是小程序的后台,一个是后台管理系统. 正式开始运行一段时间后,基本上也没什么BUG了,整个项目都已经能够正常的 ...

  4. nuxt服务端渲染

    <template> <div class="page"> page is search <ul> <li v-for="(it ...

  5. Leetcode系列之两数之和

    Leetcode系列之两数之和 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标.你可以假设每种输入只会对应一个答案.但是,你 ...

  6. What's The Next｜Kube-OVN 社区线上 Meetup 预告！

    ​ ​ Kube-OVN 社区线上Meetup 直播预约通道已开启! 活动时间 2021年8月26日(周四)19:00-20:30 活动介绍 8月26日,Kube-OVN 社区 Meetup 将通过线 ...

  7. ffmpeg+nginx截取屏幕实时画面并进行rtmp推流在前端播放

    准备环境和文件 1.下载ffmpeg的包[https://foxbaby.lanzoui.com/iYjPmup51cd] 地址:https://ffmpeg.org/download.html#bu ...

  8. vue3知识点的自我总结

    1. 我们对ref的错误理解 ref 经常去监听基本数据类型. 同时也可以去监听[数组][对象]都是可以的. ref是深度的监听.并不是大家说的那样不能去监听复杂的数据类型. 只是根据我们推荐ref去 ...

  9. 动态代理及java演示

    代理模式的理解     首先代理二字的含义,程序中代理与字面意思的代理并无区别.比如现实生活中办理车辆审车,我们经常会听说花钱找代理(又称黄牛)办手续,即办手续这个事,不是我们亲自执行,而是通过代理( ...

  10. 顺序表-Go语言实现

    简单理解就是数组: 优缺点及使用场景 优点: 随机访问,在O(1)时间内找到第i个元素: 数据表中的数据是连续存放的,因此只要知道数据表中第一个元素的地址,那么后面的数据元素的地址就可以马上算出来. ...