实现prependChild方法，即appendChild的相对方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>New Web Project</title>

        <style type="text/css">

            span{

                color: #66A300;

                font-family: "Arial Black";

            }

        </style>

    </head>

    <body>

         <div id="main">

             <span>hello!</span>

         </div>

         

         <script type="text/javascript">

             Node.prototype.prependChild = function (newNode){

                 this.insertBefore(newNode,this.firstChild);

             }

             

             var main = document.getElementById("main");

             var node = document.createElement("span");

             node.innerHTML = "World,";

             main.prependChild(node);

         </script>

    </body>

</html>

 

你可能感兴趣的:(appendChild)

  • 通俗易懂的 JS DOM 操作指南：从创建到挂载 前端 贾公子 前端javascript开发语言
    目录1.创建元素：document.createElement/createElementNS2.创建文本：document.createTextNode✏️3.修改文本：node.nodeValue️4.移除元素：el.removeChild()5.精准插入：el.insertBefore()➕6.尾部追加：el.appendChild()‍7.获取父元素：el.parentNode8.获取兄弟
  • vue2实现vue3的teleport 贰叁！ vue.js
    Teleport/index.vueexportdefault{name:'teleport',props:{/*移动至哪个标签内，最好使用id*/to:{type:String,required:true}},mounted(){//把内容移动到指定的标签内this.to渲染document.querySelector(this.to).appendChild(this.$el)},before
  • js技巧篇：惰性函数 954L javascript前端惰性函数
    普通写法functioncopyText=(text)=>{if(navigator.clipboard){navigator.clipboard.writeText(text);}else{constinput=document.createElement('input');input.setAttribute("value",text);document.body.appendChild(in
  • QT中Xml及查看调试中容器的内部数据 苜柠 QTqt
    voidChuankouUI::writeFile(){QFilefile(filePath);if(!file.open(QIODevice::WriteOnly)){emiterrData("打开配置文件失败");return;}QDomDocumentdoc;//添加根节点QDomElementroot=doc.createElement("config");doc.appendChild(
  • vue判断视频链接是否有效 指针满天飞 vue.js音视频javascript
    //判断视频链接是否有效functioncheckVideoUrl(src){//创建一个隐藏的元素letvideo=document.createElement("video");video.style.display="none";//隐藏该元素document.body.appendChild(video);//设置视频源video.src=src;//监听视频元数据加载完成事件video.
  • [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用 nqxcwl 前端javascriptappencchildinsertbeforeclonenodereplacechildremovechild
    本文主要讲解DOM常用的CURD操作，appendChild(往后追加节点),insertBefore(往前追加节点),removeChild(移除节点),replaceChild(替换节点),cloneNode(克隆节点)的语法与实战应用一、appendChild:向元素的内部最后面增加一个节点，或者移动一个现有的节点到元素的内部最后面用法:someNode.appendChild(newNod
  • 在js中使用createElement创建HTML对象和元素 Dove言和
    1.创建链接 var o=document.body; //创建链接 function createA(url,text) { var a=document.createElement("a"); a.href=url; a.innerHTML=text; a.style.color= "red"; o.appendChild(a); } createA("http://www.ffasp.com
  • web前端常见的面试题总结 2401_84436095 程序员前端
    script.src=url+‘?’+data+‘callback=’+funcNamedocument.body.appendChild(script);//这里得到请求的数据，在回调函数中执行处理window[funcName]=function(data){callback(data)}}//使用jsonp(‘http:127.0.0.1:3000/api’,{},function(res)
  • javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
    javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
  • 2018-05-24 萧声断未央
    //1.创建一个元素vara=document.createElement('a');//2.给元素添加属性或内容：a.href='http://www.baidu.com';a.innerHTML='GOBAIDU';//3.追加到dom树父元素.appendChild(子元素);document.querySelector('div').appendChild(a);varjson='[{"e
  • JS面试题--DOM操作相关 这碗花里只有粥 #JSJS面试题DOM操作
    （1）在DOM中操作中怎么创建、添加、删除、移除、替换、插入和查找节点①通过以下代码创建节点createDocumentFragment()//创建一个DOM片段createElement();//创建一个具体的元素createTextNode();//创建一个文本节点②添加、移除、替换、插入节点appendChild();removeChild();replaceChild();insertBe
  • js中怎样添加、移出、插入、复制、创建？ 一个大长腿 javascript开发语言ecmascript
    在JavaScript中，可以使用以下方法来添加、移除、插入、复制和创建元素：添加元素：使用appendChild()方法将一个子元素添加到指定父元素的末尾。使用insertBefore()方法将一个子元素插入到指定父元素的指定位置之前。移除元素：使用removeChild()方法从父元素中移除指定的子元素。插入元素：使用insertAdjacentHTML()方法在指定元素的相对位置插入HTML
  • 节点上的操作 嘉图_邵
    一、创建节点document.createElement():创建新元素，这个方法只接收一个参数，元素的标签名document.createTextNode()创建文本节点，参数为字符串文本二、插入节点appendChild()插入指定的节点使其成为那个节点的最后一个子节点在插入的元素节点上调用insertBefore(新节点，参照节点)第一个参数:待插入的节点第二个参数：已存在的节点，新节点将插
  • 封装的一些函数 岳小弟
    //标签后面插入元素functioninsertAfter(newElement,targetElement){varparent=targetElement.parentNode;if(parent.lastChild==targetElement){parent.appendChild(newElement,targetElement);}else{parent.insertBefore(ne
  • uniapp复制（解决uni.setClipboardData某些机型h5不支持） 王哈哈的学习笔记 uni-app前端linux
    /***复制到剪贴板*@param{Object}content*/$copy(content){//#ifdefH5lettransfer=document.createElement('input');document.body.appendChild(transfer);transfer.value=content;transfer.select();if(document.execComm
  • 前端常用函数功能整理 2019-12-06 Febby315
    简单页面注入分析测试//注入jquery便于解析操作DOM元素varjqueryEle=document.createElement("script");jqueryEle.src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js";document.body.appendChild(jqueryEle);//注入moment便于解析操作
  • jsonp包装 织雪纱奈
    functionaddScriptTag(src){varscript=document.createElement('script');script.setAttribute("type","text/javascript");script.src=src;document.body.appendChild(script);}window.onload=function(){addScriptT
  • JS实现一键复制、选中复制、选中多行复制 六卿 #jsjavascript前端js复制js选中复制复制粘贴
    JS实现一键复制首先我们准备一份通用的一键复制代码：exportfunctioncopyTextFun(text){if(!text)returnfalsevartextarea=document.createElement('textarea')textarea.value=textdocument.body.appendChild(textarea)textarea.select()messa
  • VUE2模拟VUE3中的Teleport实现改变元素挂载的节点 灰海 javascript前端teleportvue
    Teleport页面exportdefault{name:'teleport',props:{to:{type:String,required:true}},mounted(){consttoEl=document.querySelector(this.to)if(toEl){toEl.appendChild(this.$el)}},destroyed(){consttoEl=document.q
  • js原生实现复制内容到粘贴板 gem_Y
    privatecopyUrl=(url:string)=>()=>{lettextArea=document.createElement('textArea')textArea.innerText=urldocument.body.appendChild(textArea)//console.log(textArea)varrange=document.createRange();//创建一个ra
  • 81 js复制功能 滔滔逐浪
    Titlewelcome请点击复制functioncopyText(){varUrl2=document.getElementById("keydiv").innerText;varoInput=document.createElement("input");oInput.value=Url2;document.body.appendChild(oInput);oInput.select();do
  • DOM要点总结 淳平讲Java javascript开发语言前端
    一、基本介绍在HTMLDOM（文档对象模型）中，每个部分都是节点：1)文档本身是文档节点2)所有HTML元素是元素节点3)所有HTML属性是属性节点4)HTML元素内的文本是文本节点5)注释是注释节点二、节点常用方法1.通过具体的元素节点调用getElementsByTagName()方法，获取当前节点的指定标签名孩子节点2.appendChild(oChildNode)方法，可以添加一个子节点，
  • 浏览器 Event Loop Chen_JF
    导语本文的内容是浏览器的事件循环，并不是nodejs的事件循环，不要将两者混淆。我们先从一段代码开始：document.body.appendChild(el)el.style.display='none'这两句代码先把一个元素添加到body，然后隐藏它。从直观上来理解，可能大部分人觉得如此操作会导致页面闪动，因此编码时经常会交换两句的顺序：先隐藏再添加。但实际上两者写法都不会造成闪动，因为他们都
  • 关于js报错信息Uncaught TypeError: Cannot read properties of null (reading ‘appendChild‘)； eclipse_ali htmlhtml5javascript
    关于js报错信息UncaughtTypeError:Cannotreadpropertiesofnull(reading‘appendChild’);我在js文件中生成标签并加入body中，发现提示无法读取body，原因是js在页面生成前就已经执行所以获取不到body解决方法：将appendhild或者需要获取body标签的js代码或文件放在body内部或者body标签后Document//放中间
  • 前端JS实现简易一键复制黏贴函数(可复制换行) Xiaop
    废话不多说,直接上代码,有问题下面或者私信讨论哈定义functioncopy(copyContent){//1.创建并添加一个输入框元素(最后会销毁)consttextareaEle=document.createElement("textarea");document.body.appendChild(textareaEle);//2.将需要复制的文本传入输入框,并调用select方法,选中输入
  • JSONP的基本使用 GoFzy
    一、准备好一个不同源的数据接口AJAX跨域请求varscript=document.createElement('script');script.src='http://first.com/JSONP_server.php';document.body.appendChild(script);functionfoo(data){console.log(data);}  现在我们就可以直接在浏览器中
  • JavaScript 操作dom节点 创建 添加 移除 替换 插入 复制 查找 歌声缓缓
    创建createElement添加appendChild移除removeChild替换replaceChild（newnode,node）插入insertBefore(newnode,node)复制cloneNode(true)//false浅拷贝（只复制节点本身）true深拷贝(复制本节点以及整个子节点树)查找document.getElementById("box")document.getE
  • 教你用JavaScript制作鼠标特效 小院里的霍大侠 Web编程入门javascript前端开发语言经验分享
    案例介绍欢迎来的我的小院，我是霍大侠，恭喜你今天又要进步一点点了！我们来用JavaScript编程实战案例，做一个鼠标爱心特效。鼠标在页面移动时会出现彩色爱心特效。通过实战我们将学会createElement方法、appendChild方法、setTimeout方法。案例演示页面出现后，鼠标在页面上移动产生彩色爱心特效。案例设计我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。其中架
  • html页面添加水印 robotlee8
    letinfo={name:"小明",phone:"9527"};functionwatermark(info){if(!info&&!info.phone&&!info.name){return;}letuserInfo=info;letc=document.createElement("canvas");document.body.appendChild.c;letctx=c.getConte
  • vue2中实现一个可移动的弹框 甘道夫老矣
    先创建一个可拖拽的外壳mounted(){this.theDrag();},methods:{//拖拽theDrag(){//创建容器letcontainer=window.document.body;//将创建的div添加到容器中container.appendChild(window.document.getElementById("theDrag"));//获取到boxletbox=wind
  • ztree设置禁用节点 3213213333332132 JavaScriptztreejsonsetDisabledNodeAjax
    ztree设置禁用节点的时候注意，当使用ajax后台请求数据,必须要设置为同步获取数据，否者会获取不到节点对象，导致设置禁用没有效果。 $(function(){ showTree(); setDisabledNode(); });
  • JVM patch by Taobao bookjovi javaHotSpot
    在网上无意中看到淘宝提交的hotspot patch，共四个，有意思，记录一下。   7050685：jsdbproc64.sh has a typo in the package name 7058036：FieldsAllocationStyle=2 does not work in 32-bit VM 7060619：C1 should respect inline and
  • 将session存储到数据库中 dcj3sjt126com sqlPHPsession
    CREATE TABLE sessions ( id CHAR(32) NOT NULL, data TEXT, last_accessed TIMESTAMP NOT NULL, PRIMARY KEY (id) );   <?php /** * Created by PhpStorm. * User: michaeldu * Date
  • Vector 171815164 vector
    public Vector<CartProduct> delCart(Vector<CartProduct> cart, String id) { for (int i = 0; i < cart.size(); i++) { if (cart.get(i).getId().equals(id)) { cart.remove(i);
  • 各连接池配置参数比较 g21121 连接池
            排版真心费劲，大家凑合看下吧，见谅~     Druid DBCP C3P0 Proxool 数据库用户名称 Username Username User   数据库密码 Password Password Password   驱动名
  • [简单]mybatis insert语句添加动态字段 53873039oycg mybatis
          mysql数据库,id自增,配置如下：       <insert id="saveTestTb" useGeneratedKeys="true" keyProperty="id" parameterType=&
  • struts2拦截器配置 云端月影 struts2拦截器
    struts2拦截器interceptor的三种配置方法 方法1. 普通配置法 <struts>     <package name="struts2" extends="struts-default">         &
  • IE中页面不居中，火狐谷歌等正常 aijuans IE中页面不居中
    问题是首页在火狐、谷歌、所有IE中正常显示，列表页的页面在火狐谷歌中正常，在IE6、7、8中都不中，觉得可能那个地方设置的让IE系列都不认识，仔细查看后发现，列表页中没写HTML模板部分没有添加DTD定义，就是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3
  • String,int,Integer,char 几个类型常见转换 antonyup_2006 htmlsql.net
    如何将字串 String 转换成整数 int? int i = Integer.valueOf(my_str).intValue(); int i=Integer.parseInt(str); 如何将字串 String 转换成Integer ? Integer integer=Integer.valueOf(str); 如何将整数 int 转换成字串 String ? 1.
  • PL/SQL的游标类型 百合不是茶 显示游标(静态游标)隐式游标游标的更新和删除%rowtyperef游标(动态游标)
    游标是oracle中的一个结果集,用于存放查询的结果;   PL/SQL中游标的声明; 1,声明游标 2,打开游标(默认是关闭的); 3,提取数据 4,关闭游标     注意的要点:游标必须声明在declare中,使用open打开游标,fetch取游标中的数据,close关闭游标   隐式游标:主要是对DML数据的操作隐
  • JUnit4中@AfterClass @BeforeClass @after @before的区别对比 bijian1013 JUnit4单元测试
    一.基础知识 JUnit4使用Java5中的注解（annotation），以下是JUnit4常用的几个annotation： @Before：初始化方法   对于每一个测试方法都要执行一次（注意与BeforeClass区别，后者是对于所有方法执行一次）@After：释放资源  对于每一个测试方法都要执行一次（注意与AfterClass区别，后者是对于所有方法执行一次
  • 精通Oracle10编程SQL(12)开发包 bijian1013 oracle数据库plsql
    /* *开发包 *包用于逻辑组合相关的PL/SQL类型（例如TABLE类型和RECORD类型）、PL/SQL项（例如游标和游标变量）和PL/SQL子程序（例如过程和函数） */ --包用于逻辑组合相关的PL/SQL类型、项和子程序，它由包规范和包体两部分组成 --建立包规范：包规范实际是包与应用程序之间的接口，它用于定义包的公用组件，包括常量、变量、游标、过程和函数等 --在包规
  • 【EhCache二】ehcache.xml配置详解 bit1129 ehcache.xml
    在ehcache官网上找了多次，终于找到ehcache.xml配置元素和属性的含义说明文档了，这个文档包含在ehcache.xml的注释中！ ehcache.xml ： http://ehcache.org/ehcache.xml ehcache.xsd ： http://ehcache.org/ehcache.xsd ehcache配置文件的根元素是ehcahe   ehcac
  • java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL 白糖_ javaeclipsespringtomcatWeb
    今天学习spring+cxf的时候遇到一个问题：在web.xml中配置了spring的上下文监听器： <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener>  随后启动
  • angular.element boyitech AngularJSAngularJS APIangular.element
    angular.element 描述:     包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）     如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.e
  • java-给定两个已排序序列，找出共同的元素。 bylijinnan java
    import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class CommonItemInTwoSortedArray { /** * 题目：给定两个已排序序列，找出共同的元素。 * 1.定义两个指针分别指向序列的开始。 * 如果指向的两个元素
  • sftp 异常，有遇到的吗？求解 Chen.H javajcraftauthjschjschexception
    com.jcraft.jsch.JSchException: Auth cancel at com.jcraft.jsch.Session.connect(Session.java:460) at com.jcraft.jsch.Session.connect(Session.java:154) at cn.vivame.util.ftp.SftpServerAccess.connec
  • [生物智能与人工智能]神经元中的电化学结构代表什么? comsci 人工智能
         我这里做一个大胆的猜想,生物神经网络中的神经元中包含着一些化学和类似电路的结构,这些结构通常用来扮演类似我们在拓扑分析系统中的节点嵌入方程一样,使得我们的神经网络产生智能判断的能力,而这些嵌入到节点中的方程同时也扮演着"经验"的角色....      我们可以尝试一下...在某些神经
  • 通过LAC和CID获取经纬度信息 dai_lm laccid
    方法1： 用浏览器打开http://www.minigps.net/cellsearch.html，然后输入lac和cid信息(mcc和mnc可以填0)，如果数据正确就可以获得相应的经纬度 方法2： 发送HTTP请求到http://www.open-electronics.org/celltrack/cell.php?hex=0&lac=<lac>&cid=&
  • JAVA的困难分析 datamachine java
    前段时间转了一篇SQL的文章（http://datamachine.iteye.com/blog/1971896），文章不复杂，但思想深刻，就顺便思考了一下java的不足，当砖头丢出来，希望引点和田玉。   -----------------------------------------------------------------------------------------
  • 小学5年级英语单词背诵第二课 dcj3sjt126com englishword
    money 钱 paper 纸 speak 讲，说 tell 告诉   remember 记得，想起 knock 敲，击，打 question 问题 number 数字，号码   learn 学会，学习 street 街道 carry 搬运，携带 send 发送，邮寄，发射   must 必须 light 灯，光线，轻的 front
  • linux下面没有tree命令 dcj3sjt126com linux
    centos p安装 yum -y install tree   mac os安装 brew install tree   首先来看tree的用法 tree 中文解释：tree 功能说明：以树状图列出目录的内容。 语　　法：tree [-aACdDfFgilnNpqstux][-I <范本样式>][-P <范本样式
  • Map迭代方式，Map迭代，Map循环 蕃薯耀 Map循环Map迭代Map迭代方式
    Map迭代方式，Map迭代，Map循环   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年
  • Spring Cache注解+Redis hanqunfeng spring
    Spring3.1 Cache注解  依赖jar包： <!-- redis --> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redis</artifactId>
  • Guava中针对集合的 filter和过滤功能 jackyrong filter
    在guava库中，自带了过滤器(filter)的功能，可以用来对collection 进行过滤，先看例子：    @Test public void whenFilterWithIterables_thenFiltered() { List<String> names = Lists.newArrayList("John"
  • 学习编程那点事 lampcy 编程androidPHPhtml5
    一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！ 接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去
  • 架构师之流处理---------bytebuffer的mark,limit和flip nannan408 ByteBuffer
    1.前言。   如题，limit其实就是可以读取的字节长度的意思，flip是清空的意思，mark是标记的意思 。 2.例子. 例子代码: String str = "helloWorld"; ByteBuffer buff = ByteBuffer.wrap(str.getBytes()); Sy
  • org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1 Everyday都不同 $转义el表达式
    最近在做Highcharts的过程中，在写js时，出现了以下异常：   严重: Servlet.service() for servlet jsp threw exception org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1,
  • 用Java实现发送邮件到163 tntxia java实现
    /* 在java版经常看到有人问如何用javamail发送邮件？如何接收邮件？如何访问多个文件夹等。问题零散，而历史的回复早已经淹没在问题的海洋之中。 本人之前所做过一个java项目，其中包含有WebMail功能，当初为用java实现而对javamail摸索了一段时间，总算有点收获。看到论坛中的经常有此方面的问题，因此把我的一些经验帖出来，希望对大家有些帮助。 此篇仅介绍用
  • 探索实体类存在的真正意义 java小叶檀 POJO
    一. 实体类简述    实体类其实就是俗称的POJO,这种类一般不实现特殊框架下的接口，在程序中仅作为数据容器用来持久化存储数据用的 POJO（Plain Old Java Objects）简单的Java对象   它的一般格式就是 public class A{ private String id; public Str
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他