在js中使用createElement创建HTML对象和元素
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在js中使用createElement创建HTML对象和元素相关的知识,希望对你有一定的参考价值。
1.创建链接
<script language="javascript"> var o = document.body; //创建链接 function createA(url,text) { var a = document.createElement("a"); a.href = url; a.innerhtml = text; a.style.color = "red"; o.appendChild(a); } createA("http://www.ffasp.com/","网页教学网"); </script>
2.创建DIV
<script language="javascript"> var o = document.body; //创建DIV function createDIV(text) { var div = document.createElement("div"); div.innerHTML = text; o.appendChild(div); } createDIV("网页教学网:http://www.ffasp.com/"); </script>
3.创建表单项
<script language="javascript"> var o = document.body; //创建表单项 function createInput(sType,sValue) { var input = document.createElement("input"); input.type = sType; input.value = sValue; o.appendChild(input); } createInput("button","ooo"); </script>
4.创建表格
<script language="javascript"> var o = document.body; //创建表格 function createTable(w,h,r,c) { var table = document.createElement("table"); var tbody = document.createElement("tbody"); table.width = w; table.height = h; table.border = 1; for(var i=1;i<=r;i++) { var tr = document.createElement("tr"); for(var j=1;j<=c;j++) { var td = document.createElement("td"); td.innerHTML = i + "" + j; //td.appendChild(document.createTextNode(i + "" + j)); td.style.color = "#FF0000"; tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); o.appendChild(table); } createTable(270,270,9,9); </script>
以上是关于在js中使用createElement创建HTML对象和元素的主要内容,如果未能解决你的问题,请参考以下文章
JS中使用innerHTML和createElement方式动态创建元素
js脚本 document.createElement的问题
如何在 Angular.js 中从 DOM 中添加/删除 createElement