创建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>" ...
随机推荐
- Centos7安装docker（转！）
时间在自己的运动中也会碰到挫折,遇到障碍,所以某一段时间也会滞留在哪一个房间里 <百年孤独> 转自:https://www.cnblogs.com/yufeng218/p/8370670. ...
- 6.13-C3p0连接池配置，DBUtils使用
DBCP连接池 一.C3p0连接池配置 开源的JDBC连接池 使用连接池的好处: 减轻数据库服务器压力 数据源: ComboPooledDataSource ComboPooledDataSource ...
- solr之~模糊查询
有的时候,我们一开始不可能准确地知道搜索的关键字在 Solr 中查询出的结果是什么,因此,Solr 还提供了几种类型的模糊查询.模糊匹配会在索引中对关键字进行非精确匹配.例如,有的人可能想要搜索某个前 ...
- 洛谷P1415 拆分数列
题目背景 [为了响应党中央勤节俭.反铺张的精神,题目背景描述故事部分略去^-^] 题目描述 给出一列数字,需要你添加任意多个逗号将其拆成若干个严格递增的数.如果有多组解,则输出使得最后一个数最小的同时 ...
- selenium+python自动化86-Chrome正在受到自动软件的控制
出现问题 1.用selenium启动浏览器出现'Chrome正在受到自动软件的控制' 2.如果不想看到这种讨厌的提示语,启动浏览器时候加个配置就行了 disable-infobars 1.在浏览器配置 ...
- 本地git仓库常用操作
SSH配置: 本机创建SSH key $ ssh-keygen -t rsa -C "youremail@example.com" 将SSHkey添加到git仓库:id_rsa.p ...
- oracle10偶然性卡住登陆
连接数据库异常:登陆数据库后以"conn /as sysdba"方式登陆正常,数据库轻载,无压力:于是检查数据库的监听器,输入"lsntctl services" ...
- cobller安装操作系统
参考网站:https://blog.csdn.net/admin_root1/article/details/78911718 https://www.cnblogs.com/panwenbin-lo ...
- shiro与threamleaf的整合
1.添加依赖 2.在配置类中添加shiroDialect
- reportng代替testng的默认报告——pom设置
既然是maven项目,直接关注pom设置. 这篇写得很清楚了:maven+testng+reportng的pom设置 强调一点的是,guice必须依赖,就因这个卡了大半天. <dependenc ...