`
张玉龙
  • 浏览: 747704 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

document.createElement(div)动态生成层方法

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript1.2">
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);  

}
  

</script>

</head>

<body onload="Button1_onclick()">
</body>
</html>
分享到:
评论

相关推荐

    javascript中createElement的两种创建方式.docx

    var btn = document.createElement("inputtype='button'value='我是动态创建的2'" + "onclick='OnClick2(this)'/"); document.body.appendChild(btn); } function OnClick2(btn) { alert(btn.value); } ``` **...

    js展现table方法

    但在JavaScript中,我们可以利用DOM(Document Object Model)接口动态生成这些元素。以下是一个简单的示例: ```javascript // 创建一个新的table元素 var table = document.createElement('table'); // 创建表头...

    JS的document_详细介绍及用法

    2. `document.createElement(Tag)`: 创建一个新的HTML元素对象,如`document.createElement('div')`。 3. `document.getElementById(ID)`: 通过ID查找页面上的特定元素,如`document.getElementById('myElement')`。...

    js中动态加载div/input....

    1. **动态创建元素**:在JavaScript中,我们可以使用`document.createElement()`方法创建新的HTML元素。例如,要创建一个div,可以这样写: ```javascript var newDiv = document.createElement('div'); ``` ...

    动态生成div框并且同时加载数据

    1. 创建div元素:使用`document.createElement('div')`方法创建一个新的div元素。 2. 设置属性:可以使用`.setAttribute()`方法设置div的属性,如ID、class、样式等。 3. 插入内容:使用`.innerHTML`或`.appendChild...

    Jsp中生成模式窗体代码详解

    通过`document.createElement`方法创建一个新的`div`元素,并设置其样式属性,包括高度、宽度、背景颜色、不透明度等。最后,将其添加到页面的`body`元素中。 ##### 步骤二:创建子窗体 ```javascript // 创建子...

    js动态生成表元素

    var newTab = document.createElement("div"); var newTabs = document.getElementById("newTab"); newTab.innerHTML = ""; newTabs.innerHTML = ""; var table = document.createElement("table"); ``` - **`...

    JAVASCRIPT-DOCUMENT方法大全.pdf

    2. `document.createElement(Tag)`: 创建一个新的HTML元素,例如`document.createElement('div')`。 3. `document.getElementById(ID)`: 根据ID查找并返回对应的HTML元素。 4. `document.getElementsByName(Name)`: ...

    JavaScript的document方法汇总

    - 示例:`var newDiv = document.createElement('div');` 3. **元素选择器**: - `document.getElementById(ID)`:根据ID获取页面上的单个元素。 - `document.getElementsByName(Name)`:根据name属性获取一组...

    js菜单可以动态生成

    在JavaScript中,这可以通过`document.createElement()`、`appendChild()`等方法实现。 ```javascript var menu = document.createElement('ul'); menu.id = 'dynamicMenu'; var item1 = document.createElement('...

    js动态创建table点击按钮dom table tr添加操作

    2. **创建表格元素**:使用`document.createElement()`函数创建`&lt;table&gt;`元素。 ```javascript const table = document.createElement('table'); ``` 3. **创建表头(thead)和表体(tbody)**:对于有列名的...

    HTML DIV下载为图片 JS下载IDV为图片下载例子(亲测有效)

    var canvas = document.createElement('canvas'); // 设置canvas尺寸与div相同 canvas.width = document.getElementById(divId).offsetWidth; canvas.height = document.getElementById(divId).offsetHeight; ...

    Document对象内容集合

    - **示例**:`var newDiv = document.createElement('div')`。 #### 二、操作DOM元素 **2.1 `document.getElementById(ID)`** - **作用**:根据ID获取指定元素。 - **示例**:`var myElement = document....

    javaScript 生成DOM 对象(html标签).rar

    在“JavaScript 动态生成.txt”中可能包含了关于如何动态生成和操作DOM的具体示例代码,比如创建表单元素、添加事件监听器等。这些技巧在构建交互式网页时非常实用。 在实际应用中,我们还常常需要处理嵌套的DOM...

    js动态生成tab页

    const div = document.createElement('div'); div.classList.add('tab-panel'); div.id = `panel-${index}`; tabNav.appendChild(li); tabPanels.appendChild(div); }); // 设置默认选中第一个tab ...

    动态创建表格标签

    1. **获取DOM元素**:首先,你需要找到一个容器元素,如`&lt;div&gt;`,在这个元素内插入动态创建的表格。可以使用`document.getElementById`或`document.querySelector`等方法来获取指定的DOM元素。 2. **创建表格结构**...

    关于Javascript带右键功能的动态菜单树

    let menuItem1 = document.createElement('div'); menuItem1.textContent = '操作1'; menu.appendChild(menuItem1); let menuItem2 = document.createElement('div'); menuItem2.textContent = '操作2'; menu...

    javascript动态生成页面元素

    本文将深入探讨如何利用JavaScript动态生成HTML页面元素,包括使用innerHTML属性和DOM(Document Object Model)方法两种主要方式,以及在不同浏览器环境下的兼容性问题。 ### 1. 使用innerHTML属性 `innerHTML`...

    js动态生成表格行列特效

    在JavaScript编程中,动态生成表格是一项常见的任务,尤其在网页交互和数据展示中。本教程将深入探讨如何使用JavaScript来创建具有颜色效果和取色功能的动态表格。 首先,我们需要理解HTML表格的基本结构,它由`...

    脚本动态创建复选框,添加事件

    document.getElementById('div_checkBox').appendChild(oFrag); ``` ### 三、事件绑定与处理 在创建复选框之后,`onclick`事件处理器被添加到每个复选框上,以便在用户点击时执行特定的操作。这是通过设置元素的`...

Global site tag (gtag.js) - Google Analytics