js和jquery对dom节点的操作(创建/追加)


Posted in Javascript onApril 21, 2013
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('#Button1').click(function () { 
// var ha = '<p>a</p>'; 
// $('div').append(ha); 
//1 
// var w = '<a href="#">f4</a>' 
// $('div').append(w); 
// var sele = '<select><option>1</option><option>2</option><option>3</option></select>' 
// $('div').append(sele); 
}) 
}) 
//2var pstr = '<p><b><i>白日依山尽</br>黄河入海流</br>欲穷千里目</br>更上一层楼</i></b></p>'; $('div').append(pstr);将其改成用js来写,效果一样 
function ha() { 
// var p= document.createElement('p'); 
// var b = document.createElement('b'); 
// var i = document.createElement('i'); 
// var neirong1 = document.createTextNode('白日依山尽'); 
// var br1=document.createElement('br') 
// var neirong2 = document.createTextNode('黄河入海流'); 
// var br2 = document.createElement('br') 
// var neirong3 = document.createTextNode('欲穷千里目'); 
// var br3 = document.createElement('br') 
// var neirong4 = document.createTextNode('更上一层楼'); 
// i.appendChild(neirong1); 
// i.appendChild(br1); 
// i.appendChild(neirong2); 
// i.appendChild(br2); 
// i.appendChild(neirong3); 
// i.appendChild(br3); 
// i.appendChild(neirong4); 
// 
// b.appendChild(i); 
// p.appendChild(b); 
// document.getElementById('div1').appendChild(p); 
} 
</script> 
</head> 
<body> 
<input id="Button1" type="button" value="创建节点" /> 
<input id="Button2" type="button" value="2" onclick="ha()" /> 
<div id="div1"></div>
Javascript 相关文章推荐
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 #Javascript
jQuery获取注册信息并提示实现代码
Apr 21 #Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 #Javascript
jQuery模拟超链接点击效果代码
Apr 21 #Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 #Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 #Javascript
jQuery弹出(alert)select选择的值
Apr 21 #Javascript
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
python实现图片彩色转化为素描
2019/01/15 Python
python实现石头剪刀布程序
2021/01/20 Python
pygame实现五子棋游戏
2019/10/29 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
Python基于内置函数type创建新类型
2020/10/22 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
C面试题
2015/10/08 面试题
工厂仓管员岗位职责
2014/01/01 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
检察院起诉意见书
2015/05/20 职场文书
尼克胡哲观后感
2015/06/08 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL