创建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>" ...
随机推荐
- Scrapyd发布爬虫的工具
Scrapyd Scrapyd是部署和运行Scrapy.spider的应用程序.它使您能够使用JSON API部署(上传)您的项目并控制其spider. Scrapyd-client Scrapyd- ...
- Web 下载图片为空
问题描述: 文件下载功能是web开发中经常使用到的功能,使用HttpServletResponse对象就可以实现文件的下载.但是下载任务正常进行,下载下来的图片却是空 问题代码: //从服务器下载一张 ...
- express处理跨域问题，中间件 CORS
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 1.不用中间件的话可以这样写: app.all('*', func ...
- js实现复选框的全选和全不选
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 关系型数据库之Mysql
简介 主要知识点包括:能够与mysql建立连接,创建数据库.表,分别从图形界面与脚本界面两个方面讲解 相关的知识点包括:E-R关系模型,数据库的3范式,mysql中数据字段的类型,字段约束 数据库的操 ...
- Openstack虚机实例状态错误手工恢复vm_state:error
Openstack虚机实例状态错误手工恢复vm_state:error 1.找到状态为出错状态的VM.在数据库里面表现Status为ERROR而非ACTIVE. 2.找到出错状态VM的UUID. 3. ...
- 5. window.location.href/replace/reload()--页面跳转+替换+刷新
1.window.location=url; window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面. 一.最外层top跳转页面,适合用于iframe框架集 ...
- mysql的时区错误的解决办法
十二月 02, 2018 9:16:19 下午 com.mchange.v2.resourcepool.BasicResourcePool 警告: Having failed to acquire a ...
- 用yield 实现协程 （包子模型）
协程是一种轻量级的线程 无需线程上下级的开销, 所有的协程都在一个线程内执行 import time def consumer(name): print('%s is start to eat bao ...
- UI5-文档-4.3-Controls
现在是时候构建我们的第一个小UI了,将HTML主体中的“Hello World”文本替换为SAPUI5控件sap.m.Text.首先,我们将使用JavaScript控件接口来设置UI,然后将控件实例放 ...