原生js实现append()方法
一．在使用jquery时，append() 方法在被选元素的结尾（仍然在内部）插入指定内容
使用方法：$(selector).append(content)，content为必需的。规定要插入的内容（可包含 HTML 标签）
二．在使用原生js时，使用appendChild() 方法可向节点的子节点列表的末尾添加新的子节点，
用法：parent.appendChild(child); child没有引号包住，child参数，是node类型。给一个空文档里面动态创建元素，要使用document.body.appendChild(child).
三.例子：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.test{
color: red;
border:1px solid red;
display: inline-block;
font-size: 20px;
width: 200px;
height:50px;
}
</style>
</head>
<body>
<p id="p1">appendChild方法是在父级节点中的子节点的末尾添加新的节点</p>
<p id="p2">jquery中append方法在被选元素的结尾（仍然在内部）插入指定内容</p>
</body>
<script src="script/jquery-1.11.3.js"></script>
<script>
//用jquery来实现
$(function(){
$("#p2").bind("click",function(){
$(this).append("<strong>---我是用jquery实现的</strong>");
})
})
//用原生js来实现
window.onload=function(){
var pobj=document.getElementById('p1');
pobj.onclick=function(){
var strongobj=document.createElement('strong');
var textobj=document.createTextNode("----我是使用原生Js实现的");
pobj.appendChild(strongobj.appendChild(textobj));
}
}
</script>
</html>
原生js实现append()方法的更多相关文章
- 原生JS添加节点方法与jQuery添加节点方法的比较及总结
一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="d ...
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- 原生Js 两种方法实现页面关键字高亮显示
原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...
- 原生JS实现new方法、new一个对象发生的四部、new里面常用的优先级
一.js中new一个对象的过程 首先了解new做了什么,使用new关键字调用函数(new ClassA(…))的具体步骤: 1.创建一个新对象: var obj = {}; 2.设置新对象的const ...
- 【CSS进阶】原生JS getComputedStyle等方法解析
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- 扩展原生js的一些方法
扩展原生js的Array类 Array.prototype.add = function(item){ this.push(item); } Array.prototype.addRange = fu ...
- 原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...
- 绑定弹窗事件最好的方法，原生JS和JQuery方法
使用jQuery ui = { $close: $('.close') , $pop: $('.pop') , $topopBtn: $('.topop-btn') , $popbtnArea: $( ...
随机推荐
- 不为人知的网络编程(九)：理论联系实际，全方位深入理解DNS
本文原作者:selfboot,博客地址:selfboot.cn,Github地址:github.com/selfboot,感谢原作者的技术分享. 1.引言 对于 DNS(Domain Name Sys ...
- IT兄弟连 Java语法教程 数组 经典案例
案例需求: 编程实现双色球中奖号码的生成 1)应用知识: ● 数组的声明 ● 数组的使用 ● for循环 2)需求解析: 在该程序中,需要定义一个长度为7的数组,用来存储中奖号码,使用Rando ...
- Promise如何解决回调地狱
为什么要有promise:解决(回调地狱)的问题 ### 回调地狱: ```js //跟以前的if条件地狱很像 // if(){ // if(){ // if(){ // } // } //} $.g ...
- ABAP ALV显示前排序合并及布局显示
有时候会有用户要求显示出来的ALV立即就是升序或者降序,或者是上下同一个字段值一样的情况显示一次,如 变为 这个时候内表用SORT有时候会不好用,可以使用函数 REUSE_ALV_GRID_DISPL ...
- [b0036] python 归纳 (二一)_多进程数据共享和同步_服务进程Manager
# -*- coding: utf-8 -*- """ 多进程数据共享 服务器进程 multiprocessing.Manager 入门使用 逻辑: 20个子线程修改共享 ...
- [20191003]oracle number类型存储转化脚本.txt
[20191003]oracle number类型存储转化脚本.txt --//完善脚本,增加支持科学记数法.比如1e4之类的写法. 2.测试:$ cat test.txt012251234100-4 ...
- fastdfs-nginx-module安装和配置
fastdfs-nginx-module安装和配置 为什么要在fastdfs的storage端,安装fastdfs-nginx-module? 答案:https://www.cnblogs.com/l ...
- Windows 10系统迁移
快速复制硬盘可以调整目标盘分区大小(适用于不同容量的硬盘克隆) 调整完目标盘的系统分区大小后将恢复分区拖到系统分区后面对齐,恢复分区后面既可留出未分配容量用作Linux系统安装. 克隆完成后对uefi ...
- [排序][链表]Leetcode147 对链表进行插入排序
思路: 插入算法的思想很简单,此题比较为链表数据类型,方便的是不用一个一个的向后移动元素,但是找到应该插入的位置相对麻烦,因为链表只有next指针,无法快速定位要插入的位置.在链表前面插入一个空指针, ...
- 5. Go语言—数据类型
一.变量作用域 在函数内部声明的变量叫做局部变量,声明周期仅限于函数内部. 在函数外部声明的变量叫做全局变量,声明周期作用于整个包,如果是大写的,则作用于整个程序. 二.类型 1. 类型转换 ty ...