创建HTML元素的方法
第一种：使用 parent.appendchild()方法
HTML页面
<div id="div1"></div>
JS文件
//第一步创建标签元素节点
var elem=document.createElement("p");
//第二步创建文本节点
var content=document.createTextNode("Hello,BigSpinach!");
//第三步将文本添加到所创建的标签中
elem.appendChild(content);
//第四步，将创建的元素添加到页面中
document.getElementById("div1").appendChild(elem);
显示结果
第二种：使用innerHTML="html代码段"
HTML页面
<div id="div2"></div>
JS文件
document.getElementById("div2").innerHTML="<p>hello div2！</p>";
显示结果
第三种：使用document.write("html代码段")的方法
HTML页面
<body></body>
JS文件
document.write（"<p>hello div3！</p>"）;
显示结果
页面会打印出 hello div3！
第四种：使用jQuery创建HTML元素
HTML页面
<div id="div4"></div>
JS文件
//第一步：创建页面元素
var $p=$("<p></p>");
//第二步：设置属性和值
$p.attr("name","250");
//第三步：设置文本
$p.text("hellow div4！");
//第四步： 将创建的元素添加到指定位置
$("#div4").append($p);
显示结果
创建HTML元素的方法的更多相关文章
- js创建svg元素的方法
需要JQuery <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 原生JS和jQuery创建元素的方法
jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...
- jquery 动态创建的元素，绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- 动态创建html元素的几种方法
可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到数组中,再遍历数组动态创建html元素 3.使用模版 □ 使用jQuery动态创建元素追加到jQ ...
- jqueyr获取动态创建的元素
javascript代码是按照代码顺序执行的,所以如果你用某个元素的click事件创建一个元素,id为test,然后在下面$("#test")是无法选择到的. 正确的方法是将在cl ...
- jQuery 绑定事件到动态创建的元素上
在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...
- js动态创建的元素绑定事件
新创建的元素用传统的办法无法绑定,需要用live方法. 例: $('.rule').live('mouseover', function () { $(this).addClass("can ...
- 创建删除元素appendChild,removeChild,createElement,insertBefore
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- jquery动态创建页面元素
jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...
随机推荐
- vlc 网页插件的 使用与控制 API http://www.xuebuyuan.com/2224602.html
不知道vlc 是什么的请百度一下.. vlc 提供了ie浏览器的activeX插件和火狐或者chrome的插件,基本上覆盖了所有浏览器,所以有复杂解码需求的情况下用vlc来解决网页播放视频,也是一种没 ...
- windows CIFS sabma协议识别
今天在linux上搭建了CIFS协议,使用sabma4.7.0版本. 通过smbstatus可以查看smb软件的版本 通过/bin/smbstatus -d 0可以查看目前正连接的客户端. 问题来了: ...
- python-django-ORM，常用查询方式
介绍django model 的一些常用查询方式 首先是一些文档性的帮助 __exact 精确等于 like ‘aaa’ __iexact 精确等于 忽略大小写 ilike ‘aaa’ __conta ...
- Linux系统下MongoDB的简单安装与基本操作
这篇文章主要介绍了Linux系统下MongoDB的简单安装与基本操作,需要的朋友可以参考下 Mongo DB ,是目前在IT行业非常流行的一种非关系型数据库(NoSql),其灵活的数据存储方式,备 ...
- html调用静态json例子
1.json { "current": 2, "result": "success" } 1.html <!doctype html& ...
- Java的Synchronized
原理,注意看输入输出,不了解原理是想不到会这样输出的. http://www.cnblogs.com/paddix/p/5367116.html 还有一个要注意的是一个对象一个monitor类
- java的锁机制，synchronize与Lock比较
参考:https://blog.csdn.net/dahongwudi/article/details/78201082
- as3 分发事件无法接收
最简单的.直接用舞台接收. 如: stage.addEventListener("ok",okH);
- Others-Goldengate 数据同步
GoldenGate 是一家创建于1995年的美国公司,开发总部设在旧金山,在北美,欧洲和亚洲(包括新加坡.印度.澳大利亚)设有支持中心. 公司名称 GoldenGate 总部地点 旧金山 成立时间 ...
- Linux下基于官方源代码RPM包构建自定义MySQL RPM包
rpmbuild时不要以root用户执行! 方法一: 1.首先安装rpmbuild #yum install rpm-build gcc gcc-c++ cmake bison ncurses-dev ...