元素(element)创建
一、元素创建的三种方式-------元素创建是为了提高用户的体验
1、第一种
document.write("标签代码及内容")
<input type="button" value="创建一个p" id="btn">
<script>
document.getElementById("btn").onclick=function(){
document.write("<p>这是一个P</p>")
};
</script>
- 缺陷:页面加载完毕时后,通过这种方式创建的元素会覆盖原有页面的所有内容
- 扩展:document.write可以嵌入外部的代码(百度新闻代码为例)
2、第二种
对象.innerHTML="标签代码及内容"
<input type="button" value="创建一个P" id="btn">
<div id="dv"></div>
<script>
document.getElementById("btn").onclick=function(){
document.getElementById("dv").innerHTML="<p>这是一个P</p>";
}
</script>
- 案例1:点击按钮创建图片
<input type="button" value="来个图片" id="btn">
<div id="dv"></div>
<script>
document.getElementById("btn").onclick=function(){
document.getElementById("dv").innerHTML="<img src='1big.png' />"
};
</script>
- 案例2:点击按钮创建列表
<input type="button" value="创建列表" id="btn">
<div id="dv"></div>
<script>
var names=["java","python","c","javascript","php","html","css"];
document.getElementById("btn").onclick=function(){
var str="<ul>";
//根据循环创建对应的li
for(var i=0;i<names.length;i++){
str=str+"<li>"+names[i]+"</li>";
}
str=str+"</ul>";
document.getElementById("dv").innerHTML=str;
//代码到这里,li已经有了
//获取所有的li,遍历,添加鼠标进入事件和鼠标离开事件
var list=document.getElementById("dv").getElementsByTagName("li");
for(var i=0;i<list.length;i++){
//鼠标进入
list[i].onmouseover=function(){
this.style.backgroundColor="yellow";
};
//鼠标离开
list[i].onmouseout=function(){
this.style.backgroundColor="";
};
}
};
</script>
3、第三种
document.createElement("标签名字")------->是一个对象
<input type="button" value="创建P" id="btn">
<div id="dv"></div>
<script>
document.getElementById("btn").onclick=function(){
//首先需要创建元素,得到一个对象
var pobj=document.createElement("p");
//往对象里面写入内容
pobj.innerHTML="这是一个p";
//把创建的子元素追加到父级元素中
document.getElementById("dv").appendChild(pobj);
}
</script>
- 步骤:创建---------------->追加(方法见后面元素的相关方法)
- 案例1:点击按钮动态创建列表
<input type="button" value="创建列表" id="btn">
<div id="dv"></div>
<script>
var names=["java","python","c","javascript","php","html","css"];
document.getElementById("btn").onclick=function(){
//创建ul,把ul追加到父级元素div中
var ulobj=document.createElement("ul");
document.getElementById("dv").appendChild(ulobj);
//动态的创建li,加到ul中
for(var i=0;i<names.length;i++){
//创建li
var liobj=document.createElement("li");
//li里面添加文本内容
liobj.innerHTML=names[i];
//把里追加到ul里
ulobj.appendChild(liobj);
//为li添加鼠标进入和离开事件(此处使用命名函数)
liobj.onmouseover=mouseoverHandle;
liobj.onmouseout=mouseoutHandle;
}
};
function mouseoverHandle(){
this.style.backgroundColor="red";
}
function mouseoutHandle(){
this.style.backgroundColor="";
}
</script>
- 案例2:点击按钮创建表格
var arr=[
{name:"百度",href:"www.baudu.com"},
{name:"百度",href:"www.baudu.com"},
{name:"百度",href:"www.baudu.com"},
{name:"百度",href:"www.baudu.com"},
{name:"百度",href:"www.baudu.com"}
];
document.getElementById("btn").onclick=function(){
//创建table,加到div
var tableobj=document.createElement("table");
tableobj.border="1";
tableobj.cellPadding="0";
tableobj.cellSpacing="0";
document.getElementById("dv").appendChild(tableobj);
for(var i=0;i<arr.length;i++){
var dt=arr[i];//每个对象
//创建行,把行加到table中
var trobj=document.createElement("tr");
tableobj.appendChild(trobj);
//创建第一个列,加入到行中
var td1=document.createElement("td");
td1.innerHTML=dt.name;
trobj.appendChild(td1);
//创建第二个列,加入到行中
var td2=document.createElement("td");
td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
trobj.appendChild(td2);
}
};
</script>
- 注意:如果是循环方式添加时间,推荐使用命名函数,可以节省空间(例1鼠标进入和离开事件)
- 延伸:如何治创建一个元素(思路:有则删除,无则创建)------上述方法重复点击按钮会一直创建元素
<input type="button" value="创建一个按钮" id="btn">
<div id="dv"></div>
<script>
document.getElementById("btn").onclick=function(){
if(!document.getElementById("btn2")){//如果没有则创建
var obj=document.createElement("input");
obj.type="button";
obj.value="按钮";
obj.id="btn2";
document.getElementById("dv").appendChild(obj);
}
};
</script>
二、元素相关的方法
//1.追加子元素
父元素.appendChild(子元素);
//2.把新的子元素插入到第一个子元素的前面
父元素.insertBefore(新的子元素,第一个子元素);
//3.替换
父元素.replaceChild(新的子元素,要替换的子元素);
//4.移除元素
父元素.removeChild(子元素)
元素(element)创建的更多相关文章
- 利用HTML 5中的Menu和Menuitem元素快速创建菜单
原文:Introducing the HTML5 “Menu” and “Menuitem” Elements 译文:HTML 5中Menu和Menuitem的元素介绍 译者:dwqs 今天向你介绍H ...
- JS-DOM ~ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性
带有Element和不带的区别 a) 带Element的获取的是元素节点 b) 不带可能获取文本节点和属性节点 获取所以子节点 a) . childNodes b) . children ...
- 006 DOM节点操作与元素的创建
一:节点 1.节本基本概念 节点主要有标签,属性,文本[包括文字,空格,换行,回车]. 2.节点的属性 可以使用标签,元素点出来 可以使用标签,点出来 可以使用文本,点出来 nodeType:1--标 ...
- 如何使页面滚动条移动到指定元素element的位置处?
如何使页面滚动条移动到指定元素element的位置处? 在用selenium做测试时,会遇到需要操作的元素不在当前可视页面中的情况,如果是手工测试,自然很简单,手动拖拽滚动条到目标元素处即可. 那么, ...
- 从零开始学 Web 之 DOM(五)元素的创建
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- ASP.NET MVC异步验证是如何工作的02,异步验证表单元素的创建
在上一篇"ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式.错误信息提示.validate方法的背后"中,了解了jQuery如何验证,如何显示错误信息,本篇要 ...
- 元素(Element)和结点(Node)的区别(org.w3c.dom)
1.元素(Element)和结点(Node)的区别, 元素是一个小范围的定义,必须是含有完整信息的结点才是一个元素,例如 - . 但是一个结点不一定是一个元素,而一个元素一定是一个结点. 什么是nod ...
- [转载]3.12 UiPath存在元素Element Exists的介绍和使用
一.Element Exists的介绍 使您能够验证UI元素是否存在,即使它不可见,输出的是一个布尔值 二.Element Exists在UiPath中的使用 1.打开设计器,在设计库中新建一个Seq ...
随机推荐
- 机器学习-LDA主题模型笔记
LDA常见的应用方向: 信息提取和搜索(语义分析):文档分类/聚类.文章摘要.社区挖掘:基于内容的图像聚类.目标识别(以及其他计算机视觉应用):生物信息数据的应用; 对于朴素贝叶斯模型来说,可以胜任许 ...
- Vue使用指南(一)
Vue Vue:前台框架 渐进式JavaScript框架 渐进式:vue可以控制页面的一个局部,vue也可以控制整个页面,vue也能控制整个前端项目 -- 根据项目需求,来决定vue控制项目的 ...
- C# mailKit 发邮件 简单代码
public static async Task<bool> SendMailAsync22(string Name, string receive, string sender, str ...
- 笔记 - C#从头开始构建编译器 - 1
视频与PR:https://github.com/terrajobst/minsk/blob/master/docs/episode-01.md 作者是 Immo Landwerth(https:// ...
- TortoiseSVN-1.7.12.24070-x64-svn-1.7.9安装包和汉化包
链接:https://pan.baidu.com/s/1NbrQW44N_kTh7VN0Fz0zVA 提取码:nhd9 先安装TortoiseSVN-1.7.12.24070-x64-svn-1.7. ...
- 【转载】C#指定文件夹下面的所有内容复制到目标文件夹下面
在涉及到文件夹操作的过程中,有时候需要将文件夹下的所有内容复制拷贝到另一个文件夹,在C#的开发中有时候会遇到这个功能需求将指定文件夹下所有的内容复制到另一个文件夹,这个过程需要遍历所有的文件和目录.此 ...
- 关于Vue-elementUI中,给input手动赋值之后无法修改的问题解决
方案一:在data中给input的值赋一个初始值 方案二:在给input赋值时,使用this.$set
- vue-resource发送请求
<!DOCTYPE html> <html> <head> <title>vue-resource</title> <meta cha ...
- HTML中的图片标签的用法!
在HTML中<img>这个标签是定义文本中的图片标签,它的作用就比如说可以提供图片的名字.提供图片的尺寸大小和提供图片的一些图片属性,比如Alt这个属性,可以给图片一个名称来告诉朋友们.这 ...
- 安卓开发之利用runOnUiThread在子线程更新UI
package com.lidaochen.test; import android.graphics.Bitmap; import android.graphics.BitmapFactory; i ...