JS 创建HTML元素的方法

元素创建的三种方式:
* 1. document.write("标签的代码及内容");
* 2. 对象.innerHTML="标签及代码";
* 3. document.createElement("标签的名字");

1、document.write("标签的代码及内容")方式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title></head>
<body>
<input type="button" value="创建一个p" id="btn"/><script src="common.js"></script>
<script>//document.write("标签代码及内容");my$("btn").onclick=function () {document.write("<p>这是一个p</p>");};// document.write("<p>这是一个p</p>");//document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉</script>
</body>
</html>

缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉

2、对象.innerHTML="标签及代码" 方式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><style>div{width: 300px;height: 200px;border:2px solid pink;}</style>
</head>
<body>
<input type="button" value="创建一个p" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>//点击按钮,在div中创建一个p标签//第二种方式创建元素: 对象.innerHTML="标签代码及内容";my$("btn").onclick=function () {my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";};
</script>
</body>
</html>

3、document.createElement("标签的名字")方式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><style>div {width: 200px;height: 150px;border: 2px dashed pink;}</style>
</head>
<body>
<input type="button" value="创建p" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>//第三种方式创建元素//创建元素//document.createElement("标签名字");对象//把元素追加到父级元素中//点击按钮,在div中创建一个pmy$("btn").onclick = function () {//创建元素的var pObj = document.createElement("p");setInnnerText(pObj, "这是一个p");//把创建后的子元素追加到父级元素中my$("dv").appendChild(pObj);};</script>
</body>
</html>

common.js

/*** Created by Administrator on 2017-09-18.*/function my$(id) {return document.getElementById(id);
}//设置任意元素的中间的文本内容
function setInnnerText(element,text) {if(typeof element.textContent=="undefined"){element.innerText=text;}else{element.textContent=text;}
}
//获取任意元素的中间的文本内容
function getInnerText(element) {if(typeof element.textContent=="undefined"){return element.innerText;}else{return element.textContent;}
}//获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {if(element.firstElementChild){//true--->支持return element.firstElementChild;}else{var node=element.firstChild;//第一个节点while (node&&node.nodeType!=1){node=node.nextSibling;}return node;}
}
//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {if(element.lastElementChild){//true--->支持return element.lastElementChild;}else{var node=element.lastChild;//第一个节点while (node&&node.nodeType!=1){node=node.previousSibling;}return node;}
}//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
function addEventListener(element,type,fn) {//判断浏览器是否支持这个方法if(element.addEventListener){element.addEventListener(type,fn,false);}else if(element.attachEvent){element.attachEvent("on"+type,fn);}else{element["on"+type]=fn;}
}

JS 创建HTML元素的方法相关推荐

JS获取DOM元素的方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
JS 创建自定义对象的方法
工厂模式优点:接受参数,可以无数次的调用这个函数,创建Person对象,而每次他都可以返回一个包含三个属性一个方法的对象. 缺点:虽然解决了创建多个相似对象的问题,但是没有解决对象识别的问题(即怎么 ...
原生JS查找相邻元素——siblings方法
在JQuery中可以很方便地用 elem.siblings() 方法实现查找相邻元素,但在JS中并没有这样的方法,可以用previousSibling和nextSibling结合来实现. 不过在JS中 ...
JS之数组元素排序方法sort
作用:sort() 方法用于对数组的元素进行排序语法:arrayObject.sort(sortby) 参数:可选.规定排序顺序.必须是函数返回值:对数组的引用.请注意,数组在原数组上进行排序,不 ...
前端基础知识（五）JS删除数组元素的方法
一.length属性 JS 中Array的length长度非常有特点,他不是只读的,因此可以设置. var colors = ["red","blue",&qu ...
js创建svg元素并插入到html中使用createElementNS
w3school中对svg的描述:https://www.w3school.com.cn/svg/svg_intro.asp 因其特殊性,使用一般的document.createElement('sv ...
js创建数组的简单方法
1. 使用Array构造函数创建数组的创建方式-Array构造函数.png a.var arr1 = new Array(); //创建空数组 b.var arr2 = new Array(10): ...
js中获取元素的方法总结
1,根据 ID 获取使用 getElementById() 方法可以获取带有 ID 的元素对象. document.getElementById('id'); 使用 console.dir() 可以 ...
JS中获取元素的方法
目录一.通过id获取二.通过标签名获取三.通过class名获取四.通过name获取五.通过选择器获取一.通过id获取 document.getElementByid('id名') < ...
JS获取DOM元素的八种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...

JS 创建HTML元素的方法

JS 创建HTML元素的方法相关推荐

最新文章

热门文章