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 相关文章推荐
28个JS验证函数收集
Mar 02 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
JavaScript构建自己的对象示例
Nov 29 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
详解vue 组件
Jun 11 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
php cli 方式 在crotab中运行解决
2010/02/08 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
Python基本数据类型详细介绍
2014/03/11 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
Hibernate持久层技术
2013/12/16 面试题
工作时间上网检讨书
2014/02/03 职场文书
大学毕业感言一句话
2014/02/06 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
合伙经营协议书
2014/04/18 职场文书
重阳节标语大全
2014/10/07 职场文书
毕业横幅标语
2014/10/08 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
校长师德表现自我评价
2015/03/04 职场文书
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python