志在指尖
用双手敲打未来

生成html(用js动态生成html页面)

生成html

Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要把握一些常用的语法(类似于CSS选择器),就能够削减重复编码的作业(主要是懒)。
我个人惯用的是sublime,因而下文介绍的语法仅在sublime测试通过,不过其它渠道应该也不会有什么出入。
运用Emmet条件:设置当时为HTML语法形式
在sublime中启用Emmet,有必要把当时代码的语法形式改为HTML,如果本来便是.html文件那就没问题;如果是新建的文件还没有保存过的,则需要手动先设置为HTML:
在sublime右下角点击PlainText,弹出菜单,选择HTML。
图片描绘
按下Ctrl+Shift+P,打开指令控制台,输入“HTML”,选择SetSyntax:HTML即可。
图片描绘
快捷键
Emmet运用Tab和Ctrl+e作为自动生成HTML代码的触发器。
图片描绘
如上图所示,输入完生成HTML的句子后,按下Tab或Ctrl+e,即可生成对应的HTML代码:
图片描绘
Emmet常用语法
Emmet的语法有很多,还为了进一步提高效率而为比较长的标签都设置了缩写,我个人认为记住常用的语法即可,缩写什么的真的是学习本钱太高了。
生成HTML结构:!
输入!按下Tab,即可生成规范的HTML5结构:
图片描绘
实际上也是能够生成HTML4的结构的,但毕竟已经过时了,这儿按下不表。
后代:>
div>ul>li
<div><ul><li>li>ul>div>
兄弟:+
div>label+input
<div><labelfor=””>label><inputtype=”text”>div>
分组:()
当我们需要写一些比较复杂的HTML结构时,有两种方法能完成,其一是上级^,但是我觉得有点逆推的意味,思路上比较绕,不好用;别的一种便是分组()了,这是程序员遍及具有的分治思维的体现。
div>(ul>li)+(ol>li)
<div><ul><li>li>ul><ol><li>li>ol>div>
重复多个:*
div>ul>li*5
<div><ul><li>li><li>li><li>li><li>li><li>li>ul>div>
ID:#,类:.
ID和类能够一起运用也能够分别独立运用:
div#article.container
div#article
div.container
特点:[attr=”val”]
label[for=”passwd”]
文本内容:{}
div>a{点这儿跳转}
点这儿跳转
唯一比较常用的缩写:input:type
在里,type特点是必定要填的(你疏忽type=”text”我就轻视你),而且各个type都还满常用的,因而这个缩写能够记一下:input:type等价于input[type=”type”]。
因为type特点能够取的值太多了,这儿仅列出几个常用的作为示例:
input:text
input:radio
input:checkboxhtml

用js动态生成html页面

动态生成html元素的方法有三种:
第一种:document.createElement()创建元素,再用appendChild()方法将元素添加到指定节点
<!DOCTYPEhtml>
<htmllang=”en”>
<head>
<metacharset=”UTF-8″>
<title></title>
</head>
<body>
<divid=”main”>
<spanid=”login”></span>
</div>
</body>
<script>
varlink=document.createElement(‘a’);
link.setAttribute(‘href’,’#’);
link.setAttribute(‘id’,’login’);
link.style.color=’green’;
link.innerhtml=’登录’;
varmain=document.getElementById(‘main’);
main.appendChild(link);
</script>
</html>
第二种:使用innerhtml直接将元素添加到指定节点
<!DOCTYPEhtml>
<htmllang=”en”>
<head>
<metacharset=”UTF-8″>
<title></title>
</head>
<body>
<divid=”main”>
<spanid=”login”></span>
</div>
</body>
<script>
varlink=document.createElement(‘a’);
//使用innerhtml将元素直接添加到指定节点
main.innerhtml=”<ahref=’#’id=’login’style=’color:red;’>登录</a>”;
</script>
</html>
虎课网https://www.wode007.com/sites/73267.html设计坞https://www.wode007.com/sites/73738.html
第三种:jQuery创建节点
jQuery中创建DOM对象,使用jQuery的工厂函数$()完成,格式如下:
$(html),$(html)会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后再返回到前台页面上。
jQuery中将创建的节点插入文本中,使用append()等方法,jQuery中插入节点方法有:
1.append():向每个匹配的元素内部追加内容
2.appendTo():将所有匹配的元素追加到指定元素中,颠倒了常规的$(A).append(B)方法,不是将B追加到A中,而是将A追加到B中
3.prepend():向每个匹配的元素内部前置内容
4.prependTo():将所有匹配的内容前置到指定的元素中,与prpend()方法颠倒
5.after():向每个匹配的元素之后插入内容
6.insertAfter():将所有匹配的元素插入到指定元素的后面,与after()方法颠倒
7.before():在每个匹配的元素之前插入内容
8.insertBefore():将每个匹配的元素插入到指定内容之前,与before()方法颠倒
<!DOCTYPEhtml>
<htmllang=”en”>
<head>
<metacharset=”UTF-8″>
<title></title>
<scriptsrc=”jquery-1.11.1.min.js”></script>
<styletype=”text/css”>
.newStyle{
color:red
}
</style>
<script>
$(function(){
varlink=$(‘<ahref=”#”id=”link”style=”color:pink”>登录</a>’);
$(‘#main’).append(link).addClass(“newStyle”);
})
</script>
</head>
<body>
<divid=”main”></div>
</body>
</html>

未经允许不得转载:IT技术网站 » 生成html(用js动态生成html页面)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

志在指尖 用双手敲打未来

登录/注册IT技术大全

热门IT技术

C#基础入门   SQL server数据库   系统SEO学习教程   WordPress小技巧   WordPress插件   脚本与源码下载