创建元素节点

最新推荐文章于 2021-06-27 09:25:24 发布
最新推荐文章于 2021-06-27 09:25:24 发布
阅读量145 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/f-z-g-boke/p/9621622.html
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">    
    <title></title>
    <style type="text/css">
        html,body{
            height: 100%;
        }
        .box{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            position: absolute;
            animation: move 5s ease-out forwards infinite;
            /*animation: 动画名 播放事件 播放速度 反向播放 重复次数;*/
        }
        @-webkit-keyframes move{
            50%{left:800px;top:500px;opacity: 0;}
            100%{left:0px;top:100px;opacity: 1;}
        } 
        @-moz-keyframes move{
            50%{left:800px;top:500px;opacity: 0;}
            100%{left:0px;top:100px;opacity: 1;}
        } 
        @keyframes move{
            50%{left:800px;top:500px;opacity: 0;}
            100%{left:0px;top:100px;opacity: 1;}
        } 
    </style>
</head>
<body>
<button onclick="createDiv()">创建div</button>
<script type="text/javascript" src="new_file.js"></script>
<script type="text/javascript">
    //document.createElement("div");
    function createDiv(){
        var oDiv = document.createElement("div");
        //oDiv = $("div");
        //console.log(oDiv)
        //设置div的样式
        // 方法一：用js设置样式
//        oDiv.style.width = "200px";
//        oDiv.style.height = "200px";
//        oDiv.style.backgroundColor = randomColor();
//        oDiv.style.float = "left";
//        // 方法二：用css设置样式
        oDiv.className = "box";
        oDiv.style.backgroundColor = randomColor();
        oDiv.style.left =  ( Math.random()*($w()-40) )+"px";
        oDiv.style.top = ( Math.random()*($h() -40) )+100+"px";
    
        // 父节点.appendChild(子节点) 将子节点添加到父节点孩子列表的末尾
        document.body.appendChild(oDiv);
    }
</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/f-z-g-boke/p/9621622.html

denghr1985
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js创建元素（节点）示例
10-26
在网页开发中，JavaScript（简称JS）是构建动态网页不可或缺的...以上内容总结了JavaScript创建DOM节点的基本知识和操作细节，并对示例代码进行了详细解析，希望能够帮助开发者更好地理解和掌握JS创建元素节点的技巧。
DOM创建元素节点.获取节点
weixin_66171880的博客
02-02 1949
1.每点击一下去创建一个节点元素：案例如下 <div id="wrap"></div> <script> let oWrap = document.querySelector("#wrap"); // 每在页面上点1下，都在wrap内生成一个 div，每个div的背景色都是随机的 // wrap里每个div节点，都能绑定1个点击事件，点击时，可以打印自身 document.documentElem..
DOM基础之创建元素
ch_musk的博客
06-27 453
在JavaScript中，我们可以使用creatElement()来创建一个元素节点，也可以使用creatTextNode()来创建一个文本节点，然后将元素节点与文本节点“组装"成为我们平时所看到的”有文本内容的元素“。 这种方式又被称为”动态DOM操作“。所谓的”动态DOM“，指的是使用JavaScript创建的元素，这个元素一开始在HTML中是不存在的。 语...
创建元素节点的使用方法
logobitch的博客
07-23 1533
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。 我们来创建一个按钮，代码如下： var body = document.body; var input = document.createElement("input"); input.type = "button"; input.value = "创
jQuery_创建节点及插入节点
热门推荐
Anonymous
01-09 2万+
•创建节点:使用 jQuery 的工厂函数$(): $(html); 会根据传入的html 标记字符串创建一个DOM 对象, 并把这个DOM 对象包装成一个jQuery对象返回. •注意: –动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中; –当创建单个元素时,需注意闭合标签和使用标准的 XHTML 格式.例如创建一个元素,可以使用 $(“”)或 $(“
DOM 动态创建节点
知来者犹可追
11-17 2213
1、创建一个节点 createElement(“标签名”): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串. 方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1，新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象。 //1.创建一个li元素节点...
jQuery动态创建元素以及追加节点的实现方法
10-21
在JavaScript中，动态创建元素和追加节点是常见的操作，jQuery库为此提供了便捷的方法，使得这些操作更加简单直观。本文将详细介绍如何使用jQuery来动态创建元素以及如何追加节点。 首先，jQuery允许开发者通过字符...
JQuery创建DOM节点的方法
10-24
本文将详细介绍jQuery创建DOM节点的方法，包括创建元素节点、文本节点和属性节点的技巧。 首先，我们来理解DOM节点的概念。在HTML文档中，任何内容都是节点，而DOM节点就是指HTML文档的结构化表示。创建DOM节点通常...
jQuery简单创建节点的方法
10-21
首先，创建节点在jQuery中通常涉及创建元素、文本节点和属性节点。在提供的代码示例中，我们看到如何使用`$()`函数来创建新的HTML元素。例如： ```javascript var $li_1 = $("香蕉'>香蕉</li>"); ``` 这行代码创建...
jQuery创建DOM元素实例解析
10-24
原生JavaScript创建元素需要多个步骤：首先使用document.createElement()创建元素节点，然后用document.createTextNode()创建文本节点，最后通过appendChild()将文本节点添加到元素节点中。而jQuery通过$()函数的...
js之DOM操作（创建元素节点createElement）
web前端菜鸟工程师
09-21 6051
创建元素节点createElement createElement()方法可创建元素节点。此方法可返回一个 Element 对象。 语法： document.createElement(tagName) 参数: tagName：字符串值，这个字符串用来指明创建元素的类型。 注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。
创建一个html节点,HTML DOM 07 创建节点
weixin_33187554的博客
06-27 150
示例1:创建元素节点通过createElement创建一个新的元素节点接着把该元素节点，通过appendChild加入到另一个元素节点div1中Hello HTML DOMfunction add(){var hr=document.createElement("hr");var div1 = document.getElementById("d");div1.appendChild(hr)...
节点
qq_38173933的博客
06-13 201
2.创建节点元素 工厂函数$()用于获取或创建节点 $(selector)：通过选择器获取节点 $(element)：把DOM节点转化成jQuery节点 $(html)：使用HTML字符串创建jQuery节点 插入子节点 元素内部插入子节点 语法 功能 append(content) $(A).append(B)表示将B追加到A中。如：$("ul").append($newN
总结一下jQuery操作元素节点的方法（创建、选择、插入节点）
xinghuo0007的博客
05-08 1万+
知识点一：创建节点注意：Jquery创建元素节点、属性节点、文本节点都使用$(html)1.创建元素节点：$("<li></li>"); 2.创建属性节点：$("<li id='test'></li>"); 3.创建文本节点：$("hello world !"); 4.下面是创建三者的结合：$("<li id='test'>hello world !</li>"); 解释：4是创建一个id属性为te
[Jq] jqury操作元素节点的方法（创建、选择、插入节点）
Teheran的博客
01-28 534
创建节点 注意：Jquery创建元素节点、属性节点、文本节点都使用$(html) 1.创建元素节点： $("&lt;li&gt;&lt;/li&gt;"); 2.创建属性节点： $("&lt;li id='test'&gt;&lt;/li&gt;"); 3.创建文本节点： $("hello world !"); 4.下面是创建三者的结合： $("&lt;
jQuery操作元素节点的方法（创建、选择、插入节点）
dizhefu7625的博客
05-19 270
知识点一：创建节点 注意：Jquery创建元素节点、属性节点、文本节点都使用$(html) 1.创建元素节点：$("<li></li>"); 2.创建属性节点：$("<li id='test'></li>"); 3.创建文本节点：$("hello world !"); 4.下面是创建三者的结合：$("<li id='te...
创建一个dom元素
work hard
06-24 1838
一、原生JavaScript var a = document.createElement("a"); a.setAttribute('href',href); 二、jQuery $(function(){ $("input[type='button']").click(function() { new_obj = $(""); $(thi
创建元素（节点）
三人行，必有我师焉。
01-01 889
jquery2              //创建节点         var addItems = function() {             document.getElementById("div1").innerHTML = "";             var value = parseInt(document.getElementById('itemsNumber')
创建元素节点createElement
最新发布
09-15
创建元素节点可以使用原生的JavaScript方法document.createElement()，也可以使用jQuery库的$方法。 使用原生的JavaScript方法document.createElement()创建元素节点的代码如下： ``` var element = document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值