我们在WEB开发时,很多时候往往需要我们 JavaScript 来动态建立 html 元素,动态的设置相关的属性。比方说我们想要建立一个 div 层,则可以使用以下代码实现。
一.直接建立

 function Button1_onclick() //直接采用代码建立一个DIV
{
var newElement = document.createElement('div');
var newText = document.createTextNode('这是新建立 div 中的文字。');
document.body.appendChild(newElement); //漏了这一句,否则行不通
newElement.id = 'newDiv';
newElement.className = 'newDivClass';
newElement.setAttribute('name ','newDivName');
newElement.style.width = '300px';
newElement.style.height = '200px';
newElement.style.margin = '0 auto';
newElement.style.border = '1px solid #DDD';
newElement.appendChild(newText);
}

二.把建立新对象写成一个通用方法,增加其通用性

createEl = function(t, a, y, x)//编写建立一个新对象的通用方法
{
var e = document.createElement(t);
document.body.appendChild(e); //漏了这一句,否则行不通
if (a) {
for (var k in a) {
if (k == 'class') e.className = a[k];
else if (k == 'id') e.id = a[k];
else e.setAttribute(k, a[k]);
}
}
if (y) { for (var k in y) e.style[k] = y[k]; }
if (x) { e.appendChild(document.createTextNode(x)); }
return e;
} //再通过以下方法来进行调用建立一个新层
function Button2_onclick() //先把建立一个新的DIV的方法写成一个通用方法,然后通过调用方法实例化建立DIV
{
var newElement = createEl('div',
{'class': 'newDivClass', id: 'newDiv', name: 'newDivName'},
{width: '300px', height:'200px', margin:'0 auto', border:'1px solid #DDD'},
'这是新建立div 中的文字。'); }

js动态生成层方法 不懂得加QQ 2270312758的更多相关文章

  1. js中let和var的区别 不懂得加QQ 2270312758

    js中使用let定义变量的时候,是需要使用严格模式的,我看到网上有的博客说:如果在不使用严格模式的情况下,使用let会报错,但是在实验的过程中,我直接定义了let变量而且也没有使用严格模式,并没有报任 ...

  2. 简化document.createElement("div")动态生成层方法

    我们在WEB开发时,很多时候往往需要我们 JavaScript 来动态建立 html 元素,动态的设置相关的属性.比方说我们想要建立一個 div 层,则可以使用以下代码实现. 一.直接建立functi ...

  3. js 动态调用字符串方法并传入对应参数

    在项目应用中,经常会需要根据业务数据需要动态去拼凑字符串,然后将字符串作为js代码进行执行. js提供eval()来支持.这里分享一个调用函数并传入需要参数的一个方法demo //动态调用自定义js方 ...

  4. js动态创建表格方法

    window.onload = function(){ var table = document.createElement('table'); table.border = 1; table.wid ...

  5. js 动态添加元素(div、li、img等)及设置属性

    把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点 ...

  6. js动态加载css文件和js文件的方法

    今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...

  7. 使用jQuery动态加载js脚本文件的方法

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...

  8. (一)JQuery动态加载js的三种方法

    Jquery动态加载js的三种方法如下: 第一种: $.getscript("test.js"); 例如: <script type="text/javascrip ...

  9. js 动态加载事件的几种方法总结

    本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助   有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...

随机推荐

  1. myeclipse maven tomcat插件 创建web工程

    自从有了云笔记,很久不写博客了.今天写了使用Freemarker静态化JSP页面,索性就发出来.初学,勿喷. 这篇文字以前放在云笔记里,当然里面有很多借鉴网络上的东西,而自己也使用Maven很久了,索 ...

  2. Docker系列之swarm集群搭建

    学习Docker很久了,今天分享一下Docker的swarm集群的搭建过程很简单 首先第一步是 每台机器上面都要安装docker 本人使用的是centos7操作系统,使用3太虚拟机,3太虚拟机必须网络 ...

  3. 前端教程(1)http协议的深刻理解

    一 HTTP协议简介 作为学习前端开发的开始,我们必须搞明白以下几件事 1.什么是互联网      互联网=物理连接介质+互联网协议     2.互联网建立的目的? 数据传输打破地域限制,否则的话,我 ...

  4. 解决tomcat部署项目中碰到的几个问题

    在tomcat上部署项目并进行测试,经常会碰到各种问题.在不同的操作系统上部署,对问题的解决也会有一些差异. 1 发现问题 1.1 项目部署 先将项目达成war包,放到tomcat的webapps目录 ...

  5. 如何在ASP.NET Core中使用Azure Service Bus Queue

    原文:USING AZURE SERVICE BUS QUEUES WITH ASP.NET CORE SERVICES 作者:damienbod 译文:如何在ASP.NET Core中使用Azure ...

  6. RabbitMQ 消息队列 入门 第一章

    RabbitMQ : 官网:https://www.rabbitmq.com/ GitHub:https://github.com/rabbitmq?q=rabbitmq 第一步安装: 点击  htt ...

  7. ef和mysql使用(一)

    ef开发模式有3种:DateBase First(数据库优先).Model First(模型优先)和Code First(代码优先).这里我用的是code first 一个简单的例子: public ...

  8. Spring boot打包war包

    1.设置打包的类型(war/jar) 在pom.xml里设置 <packaging>war</packaging> 2.移除嵌入式tomcat插件 //在pom.xml里找到s ...

  9. Oracle数据库知识要点

    一.卸载安装(来自百度经验) 完全卸载: 1. 停止相关服务 2. 运行Universal Installer,卸载产品 3. 清理注册表 4. 重启电脑,删除目录(Oracle文件夹和app文件夹) ...

  10. AndroidStduio3.0 使用gradle将module打包jar文件

    AndroidStduio3.0使用gradle将module打包jar文件,首先需要安装gradle. 打开控制台输入      open -e .bash_profile     命令,就可以打开 ...