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 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
详解javascript new的运行机制
Jan 26 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
JS实现简易留言板(节点操作)
Mar 16 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与ASP
2006/10/09 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
PHP抽象类 介绍
2012/06/13 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
详解javascript高级定时器
2015/12/31 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
Three.js学习之网格
2016/08/10 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python实现车牌识别的示例代码
2019/08/05 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
Django发送邮件功能实例详解
2019/09/02 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
pandas实现导出数据的四种方式
2020/12/13 Python
大一军训感言
2014/01/09 职场文书
美容院考勤制度
2014/01/30 职场文书
作风建设整改方案
2014/10/27 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android