动态生成html元素的方法有三种:
第一种:document.createElement()创建元素,再用appendChild( )方法将元素添加到指定节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main">
<span id="login"></span>
</div>
</body>
<script>
var link = document.createElement('a');
link.setAttribute('href','#');
link.setAttribute('id','login');
link.style.color = 'green';
link.innerHTML = '登录';
var main = document.getElementById('main');
main.appendChild(link);
</script>
</html>
第二种:使用innerHTML直接将元素添加到指定节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main">
<span id="login"></span>
</div>
</body>
<script>
var link = document.createElement('a');
//使用innerHTML将元素直接添加到指定节点
main.innerHTML = "<a href='#' id='login' style='color: red;'>登录</a>";
</script>
</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()方法颠倒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
.newStyle{
color:red
}
</style>
<script>
$(function(){
var link=$('<a href="#" id="link" style="color:pink">登录</a>');
$('#main').append(link).addClass("newStyle");
})
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>
借鉴文档出处:https://blog.csdn.net/fredaouyang/article/details/56481458
有时我们想实现这样一个功能,点击一个链接,如果这个链接浏览器已经打开过,则刷新已经打开的链接窗口;如果这个链接没有打开过,则使用新窗口打开这个链接页面。
通过id删除;通过class获取元素;清空一个元素,即删除一个元素的所有子元素 ;原理很简单,就是不断的判断要清空的div还有没有子节点,有的话就删除一个子节点(这里是它的首个子节点),直到删除完毕为止。
有时候我们希望元素被focus的时候页面不发生滚动,例如我们点击一个按钮打开一个弹框,此时点击弹框中的关闭按钮隐藏弹框后,希望键盘的焦点回到之前的按钮上,我们就会执行如下JavaScript代码:
结构元素不具有任何样式,只是使页面元素的的语义更加明确。header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容。nav元素用于定义导航链接,是html5新增的元素
在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,
angular删除(remove)元素可以使用angular.element中的remove()方法,此方法可以将匹配元素集合从DOM中删除(同时移除元素上的事件及jQuery数据)。
大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。有时候我们需要在父元素的容器内设置相对的绝对位置
在网页制作中,元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路,对于元素显隐来说,最常见就是display:none | display:block,但是使用这种方法有个问题
块级元素会独占一行,其宽度自动填满其父元素宽度行内元素不会独占一行;块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果
相信小伙伴们都被问过这样一个问题:让一个元素隐藏起来,有多少种方法呢?常规来讲,我们有三种方法display: none、opacity: 0和visibility: hidden ,基于display: none的副作用,已经是个被说烂的问题,主要是有以下缺点:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!