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 相关文章推荐
js简易namespace管理器 实例代码
Jun 21 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
layui使用templet格式化表格数据的方法
Sep 16 Javascript
vue v-model的用法解析
Oct 19 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
Python温度转换实例分析
2018/01/17 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
python文件路径操作方法总结
2020/12/21 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
企业标语口号
2014/06/10 职场文书
金秋助学感谢信
2015/01/21 职场文书
高三生物教学反思
2016/02/22 职场文书