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 相关文章推荐
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
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
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
vue 实现购物车总价计算
2019/11/06 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python OpenCV获取视频的方法
2018/02/28 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
如何查找网页漏洞
2016/06/22 面试题
高中自我鉴定范文
2013/11/03 职场文书
求职面试个人自我评价
2014/02/28 职场文书
关于爱国的标语
2014/06/24 职场文书
幼儿教师个人总结
2015/02/05 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
早上好问候语大全
2015/11/10 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
nginx rewrite功能使用场景分析
2022/05/30 Servers