创建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>" ...
随机推荐
- 【Unix网络编程】chapter3 套接字编程简介
chapter3套接字编程简介3.1 概述 地址转换函数在地址的文本表达和他们存放在套接字地址结构中的二进制值之间进行转换.多数现存的IPv4代码使用inet_addr和inet_ntoa这两个函数, ...
- 线程池,queue模块增加用法
1 同一个进程内的队列(多线程) import queue queue.Queue() 先进先出 queue.LifoQueue() 后进先出 queue.PriorityQueue() 优先级队列 ...
- linux主机555、644、666、755、777权限详解
linux主机555.644.666.755.777权限详解 发表时间:2014-06-03 05:07 来源:未知 分类:其它代码 作者:岑溪网站开发 点击:次 linux主机555.644.666 ...
- POI实现EXCEL单元格合并及边框样式
POI实现EXCEL单元格合并及边框样式 下面例子为创建产生一个excel,合并单元格,然后为合并后的单元格添加边框 package test; import java.io.FileOutp ...
- 单元测试工具NUnit的使用
使用 NUnit 工具来进行单元测试 首先在要创建一个单元测试的项目,通常在原有的解决方案中添加新项目, 在弹出的项目类型中选择单元测试,项目的命名一般情况下与解决方案的名称相同后加UnitTes ...
- Executor框架（二）Executor 与 ExecutorService两个基本接口
一.Executor 接口简介 Executor接口是Executor框架的一个最基本的接口,Executor框架的大部分类都直接或间接地实现了此接口. 只有一个方法 void execute(Run ...
- navicate for mysql mac 含注册机 亲测可用
百度网盘:https://pan.baidu.com/s/1hrXnRes
- PYTHON实现识别图片
自学Python3第5天,今天突发奇想,想用Python识别图片里的文字.没想到Python实现图片文字识别这么简单,只需要一行代码就能搞定 #作者微信:2501902696 from PIL imp ...
- 0_Simple__simplePitchLinearTexture
对比设备线性二维数组和 CUDA 二维数组在纹理引用中的效率 ▶ 源代码.分别绑定相同大小的设备线性二维数组和 CUDA 二维数组为纹理引用,做简单的平移操作,重复若干次计算带宽和访问速度. #inc ...
- 从Chrome 69.0 版本起，Flash权限受到进一步限制，默认仅在当前浏览器会话有效。
# 69.0 之后的版本 ## 从Chrome 69.0 版本起,Flash权限受到进一步限制,默认仅在当前浏览器会话有效.关闭Enable Ephemeral Flash Permissions , ...