js动态生成html元素并为元素追加属性

时间: 2018-08-01阅读: 1270标签: 元素

动态生成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

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/967

关闭

精确获取页面元素的位置

现在网上最流行方法是John Resig在《Pro JavaScript techniques》提出的offset大法,累加元素offsetParent的offsetLeft和offsetTop一直到DOM的顶层。

Css元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,

HTML5语义化元素你真的用的正确吗?

语义学是研究语言中单词和短语的含义。语义元素=具有意义的元素。 语义元素清楚地描述了它对浏览器和开发人员的意义。 非语义元素的示例:<div>和<span>- 对其内容一无所知。 语义元素的示例:<form>,<table>和<article>- 清楚地定义其内容

JS 创建元素的三种方法

动态创建元素一 document.write()body标签中就会插入但是这种方法几乎不用,因为这回影响页面的布局,甚至会将页面原来的内容冲刷掉,从而只显示输出内容;动态创建元素二 innerHTML

Js中获取HTML元素的方式有哪些?

对于许多前端开发项目来说,获取元素进行操作是必不可少的,例如tab标签,全屏切换,自动滚播等效果都需要通过获取节点元素来实现。下面我们来看一下JavaScript获取HTML元素的方式。

原生 JS 和 jQuery 检查某元素是否存在

对于动态生成内容的网页,常常遇到需要判断元素是否存在的场景。在 jQuery 中使用一个不存在的元素完全不会报错,请放心大胆使用。

js元素创建的三种方式

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

jQuery获取元素的大小和位置信息

css()方法获取元素的宽高:css()方法返回的其实是getComputedStyle(node).width的值,也就是元素内容区的宽高;width() / height()这两个方法返回的也是元素内容区的宽高,但是不带单位

CSS隐藏页面元素常用方法_不同场景下使用CSS隐藏元素

使用 CSS 让元素不可见的方法很多,剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见,但背后却在多个维度上都有差别

javascript如何判断元素是否存在?

JavaScript中可以通过theForm、theForm.periodPerMonth、getElementById等方法判断元素是否存在。也可以使用Jquery的length属性来判断。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!