DOM操作-动态创建网页元素
动态创建新的DOM元素,是JavaScript操作网页对象模型的重要手段之一
代码:
<!DOCTYPE html>
<html>
<head>
<title>创建新元素</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
//创建新元素
function createNewElements(){
//使用innerHTML创建新元素
var p1 = document.getElementById("p1");
//设置innerHTML内容
p1.innerHTML = "<span>我的dom文本1</span>";
//使用createElement来创建新元素
var span = document.createElement("span");
//为新元素内容创建一个文本节点
span.appendChild(document.createTextNode("我的dom文本2"));
var p2 = document.getElementById("p2");
//挂接
p2.appendChild(span);
}
</script>
</head>
<body style="text-align:center">
<p>
<input type="button" value="创建新元素" onclick="createNewElements();"/>
</p>
<!-- 定义为新元素挂接的容器元素 -->
<p id="p1"></p>
<p id="p2"></p>
</body>
</html>
解析:
创建新元素,一般来说有两种方法:第一种是直接修改父元素的innerHTML元素;第二种是使用createElement()函数创建,再用appendChild()函数进行DOM元素的挂接。
第一种方法使用起来比较简单,也很好理解,但是需要修改整个父元素所包含的HTML内容,如果父元素原先就包含了一些HTML内容,再进行DOM挂接的话,再进行DOM挂接的话,执行效率比较低。
第二种方法相对比较灵活,效率也相对较高,只是使用起来复杂一些。
DOM操作-动态创建网页元素的更多相关文章
- 用jQuery绑定事件到动态创建的元素上
jQuery最常用的一个功能就是对DOM的操作,与之相关的比如对事件的绑定和Ajax动态内容加载.当我们绑定事件到Ajax load回来的内容上或其他动态创建的元素上时会发现事件没响应,和你预想的结果 ...
- jQuery 绑定事件到动态创建的元素上
在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...
- jquery动态创建页面元素
jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...
- 基于jQuery动态创建html元素
在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了. 常见的动态创建HTML元素的方式,有如下几种,大体都差 ...
- jquery 动态创建的元素,绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- 动态创建html元素的几种方法
可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到数组中,再遍历数组动态创建html元素 3.使用模版 □ 使用jQuery动态创建元素追加到jQ ...
- jQuery动态创建html元素的常用方法汇总
在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到 ...
- js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
- DOM操作,控制HTML元素 (原生JS)
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码: 将HTM ...
随机推荐
- Oracle跨库访问数据表-DBLINK
1:创建DBLINK(USING后面的连接字符串就是要访问的那个数据库的连接字符串) CREATE DATABASE LINK linkName CONNECT TO userName IDENTIF ...
- 101个Linq例子(40-60)
GroupBy - Simple 2 public void Linq41() { string[] words = { "blueberry", "chimpanzee ...
- C++编程技巧(长期更新)
1.数组使用 int* p = new int[5](); // 数组新建并全部初始化为0 等价于: int* p; p = new int[5](); int* q = new int[5]; ...
- jquery点击选中,再次点击取消选中
if(!$(this).hasClass("current")){ $(this).addClass("current"); }else{ $(this).re ...
- python报错Could not open PYTHONSTARTUP
root@liqian-python:/pythonShare/monitor/m_server/core# pythonPython 2.7.10 (default, Oct 14 2015, 16 ...
- Node.js API
Node.js v4.4.7 Documentation(官方文档) Buffer Prior to the introduction of TypedArray in ECMAScript 2015 ...
- 用VB把xlsx转换为xls
Sub Test()Dim wb As Workbook, mPath As String, f As StringApplication.DisplayAlerts = FalseApplicati ...
- Struts2 stracture
- [转]URL的解析,C语言实现
http://blog.csdn.net/cuishumao/article/details/10284463 一 说明(1)应用情况:比如基于socket来实现http协议等,这时候就需要解析URL ...
- 深度分析如何在Hadoop中控制Map的数量
深度分析如何在Hadoop中控制Map的数量 guibin.beijing@gmail.com 很多文档中描述,Mapper的数量在默认情况下不可直接控制干预,因为Mapper的数量由输入的大小和个数 ...