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 子窗口操作父窗口的代码
Sep 21 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
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统计目录大小的自定义函数分享
2014/11/18 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
利用php输出不同的心形图案
2016/04/22 PHP
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
Python中的多重装饰器
2015/04/11 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
python redis存入字典序列化存储教程
2020/07/16 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
顶撞老师检讨书
2014/02/07 职场文书
学校后勤岗位职责
2014/02/19 职场文书
个人承诺书
2014/03/26 职场文书
青年文明号服务承诺
2014/03/31 职场文书
党校毕业心得体会
2014/09/13 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python