原生js实现给指定元素的后面追加内容

代码如下:

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 );
};
};

赞 (0)

相关推荐

  • 原生JS操作网页给p元素添加onclick事件及表格隔行变色

    原生JS操作网页给p元素添加onclick事件及表格隔行变色

    1. 给网页中的所有p元素添加onclick事件: 复制代码 代码如下: <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.

  • 原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    经常看到网页里图片渐变显示,自己写一个. 原理很简单就是修改元素的css透明度. 在线预览效果:http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <

  • 原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • 原生js实现查找/添加/删除/指定元素的class

    复制代码 代码如下: window.onload = function(){ var gaga = document.getElementById( "gaga" ); addClass( gaga,"gaga1" ) addClass( gaga,"gaxx" ); removeClass( gaga,"gaga1" ) removeClass( gaga,"gaga" ) function hasCla

  • 原生js获取元素样式的简单方法

    我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty

  • 原生js实现给指定元素的后面追加内容

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

  • 原生JS与JQ获取元素的区别详解

    这篇文章主要介绍了原生JS与JQ获取元素的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定的元素封装成DOM对象): (1)通过元素ID获取:document.getElementById(),示例如下: 我们在控制台输出,结果如下: 可以

  • 原生javascript实现获取指定元素下所有后代元素的方法

    本文实例讲述了原生javascript实现获取指定元素下所有后代元素的方法,分享给大家供大家参考.具体实现方法如下: 过去常用的循环递归的方式显得非常的麻烦,下面就分享一个比较简单的方式,使用原生的javascript方法即可实现此功能. 代码实例如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author&q

  • 原生JS实现列表子元素顺序反转的方法分析

    本文实例讲述了原生JS实现列表子元素顺序反转的方法.分享给大家供大家参考,具体如下: 编写一个函数将一个列表里面的所有子元素顺序反转,问题不难但是解决的方法却有多种,而且性能大不一样,下面就介绍几种常用的方法: 1. 采用直接的DOM操作: var ul = document.getElementById('target'); var list = ul.getElementByTagName('li'); var length = list.length; while(length--){ u

  • 原生JS实现Ajax跨域请求flask响应内容

    Ajax方法好,网站感觉跟高大上,但由于Js的局限,跨域Ajax无法实现,这里,讲一下解决办法,前提是需要能够自己可以控制flask端的响应. 主要技术: 修改服务器相应的相应头,使其可以相应任意域名.and设置响应头,使其能够相应POST方法. 实现代码: 这里先放flask代码: from flask import make_response @app.route('/test',methods=['get','post']) def Test(): if request.method=='

  • 详解js删除数组中的指定元素

    详解js删除数组中的指定元素

    本篇文章将会给大家介绍两种删除数组中的指定元素的方式,分别为: 1.单独定义一个的函数,通过函数来删除指定数组元素. 2.为Array对象定义了一个removeByValue的方法,在调用方法来删除指定数组元素,调用非常简单的. 下面我们通过简单的代码示例来简单介绍这两种删除数组指定元素的方式. 1.定义单独的函数removeByValue来进行元素删除 代码示例:删除数组somearray里的"tue"元素 <!DOCTYPE html> <html> <

  • JS实现数组删除指定元素功能示例

    JS实现数组删除指定元素功能示例

    本文实例讲述了JS实现数组删除指定元素功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net JS数组删除指定元素</title> </head> <body> <script> var array = [&qu

  • 利用原生JS自动生成文章标题树的实例

    实现原理很简单,就是循环文章模块,并抽取其中的h2.h3标签,将其中的内容赋予给新建的title树. 代码如下: HTML代码: <div class="contextBox"> <div id="article"> <h2>二级标题</h2> <h3>三级标题</h3> <p>hello hello hello hello hello hello hello hello hello

  • 基于JavaScript实现移除(删除)数组中指定元素

    在Array对象中有给定的函数可以删除数组中指定的元素,虽然非常好用,但是总感觉看不到摸不着的比较别扭,下面就分享一个自定义的删除数组指定索引值元素的函数,希望给大家一个全新的思路. 代码实例如下: var array=[]; array[0]="我们一"; array[1]="我们二"; array[2]="我们三"; array[3]="我们四"; array[4]="我们五"; function re

随机推荐