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 相关文章推荐
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
js的touch事件的实际引用
Oct 13 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
js中常用的Math方法总结
Jan 12 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
Vue核心概念Getter的使用方法
Jan 18 Javascript
vue data恢复初始化数据的实现方法
Oct 31 Javascript
用javascript制作qq注册动态页面
Apr 14 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
prototype1.4中文手册
2006/09/22 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
python实现BackPropagation算法
2017/12/14 Python
Python中单例模式总结
2018/02/20 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
shell程序中如何注释
2012/02/17 面试题
2014年语文教研组工作总结
2014/12/06 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers
Django框架中视图的用法
2022/06/10 Python