精华内容
下载资源
问答
  • 创建节点元素 函数 $() 用于动态创建页面元素,其语法格式如下: $(html) 其中,参数 html 表示用于动态创建 DOM 元素的 HTML 标记字符串,即如果要在页面中动态创建一个 div 标记,并设置其内容和属性,可以...

    本篇文章开始聊聊如何通过jQuery操作页面元素。

     

    一.创建节点元素

    函数 $() 用于动态创建页面元素,其语法格式如下:

    $(html)

    其中,参数 html 表示用于动态创建 DOM 元素的 HTML 标记字符串,即如果要在页面中动态创建一个 div 标记,并设置其内容和属性,可以加入如下代码:

    var $div = $("<div title='jQuery理念 '>Write Less Do More</div>");
    $("body").append($div);

    执行上述代码后,将在页面文档 body 中创建一个 div 标记,其内容为“Write Less Do More”,属性 title 的值为“jQuery 理念”。下面示例介绍了如何通过 $() 函数将页面元素动态增加到指定节点中。

    <!doctype html>
    <html>
    
    <head>
        <title>动态创建节点元素 </title>
        <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js">  </script>
        <style type="text/css">
            body {
                font-size: 13px
            }
    
            ul {
                padding: 0px;
                list-style: none
            }
    
            ul li {
                line-height: 2.0em
            }
    
            .divL {
                float: left;
                width: 200px;
                background-color: #eee;
                border: solid 1px #666;
                margin: 5px;
                padding: 0px 8px 0px 8px
            }
    
            .divR {
                float: left;
                width: 200px;
                display: none;
                border: solid 1px #ccc;
                margin: 5px;
                padding: 0px 8px 8px 8px
            }
    
            .txt {
                border: #666 1px solid;
                padding: 3px;
                width: 120px
            }
    
            .btn {
                border: #666 1px solid;
                padding: 2px;
                width: 60px;
                filter: progid:DXImageTransform.Microsoft. Gradient(GradientType=0,
                StartColorStr=#ffffff, EndColorStr=#ECE9D8);
            }
        </style>
        <script type="text/javascript">
            $(function () {
                $("#Button1").click(function () {
                    /*获取参数 */
                    var $str1 = $("#select1").val();//获取元素名  
                    var $str2 = $("#text1").val();  //获取内容  
                    var $str3 = $("#select2").val();//获取属性名  
                    var $str4 = $("#text2").val();  //获取属性值  
                    var $div = $("<" + $str1 + " " + $str3 + "='"
                        + $str4 + "'>" + $str2 + "</"
                        + $str1 + ">");      //创建 DOM对象
                    $(".divR").show().append($div); //插入节点中
                })
            })
        </script>
    </head>
    
    <body>
        <div class="divL">
            <p></p>
            <ul>
                <li>元素名 :
                    <select id="select1">
                        <option value='p'>p</option>
                        <option value='div'>div</option>
                    </select> </li>
                <li>内容为 :
                    <input type="text" id="text1" class="txt" /> </li>
                <li>属性名 :
                    <select id="select2">
                        <option value='title'>title</option> </select>
                </li>
                <li>属性值 :
                    <input type="text" id="text2" class="txt" /> </li>
                <li style="text-align:center;padding-top:5px">
                    <input id="Button1" type="button" value="创建 " class="btn" />
                </li>
            </ul>
        </div>
        <div class="divR"></div>
    </body>
    
    </html>

     

     

    好了,本篇文章就介绍到这儿,欢迎大家留言交流;喜欢或有帮助到您的话,点个赞或推荐支持一下!

     

    转载于:https://www.cnblogs.com/johnvwan/p/9588719.html

    展开全文
  • 创建元素节点: 可以有几种方式,后面会慢慢接触。常见就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$("html结构") $("<div><...与创建元素节点同样...

    创建元素节点:

    可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$("html结构")

    $("<div></div>")

    创建为本节点:

    与创建元素节点类似,可以直接把文本内容一并描述

    $("<div>我是文本节点</div>")

    创建为属性节点:

    与创建元素节点同样的方式

    $("<div id='test' class='aaron'>我是文本节点</div>")

    我们通过jQuery把上一届的代码改造一下,如右边代码所示

    一条一句就搞定了,跟写HTML结构方式是一样的

    $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
    这就是jQuery创建节点的方式,让我们保留HTML的结构书写方式,非常的简单、方便和灵活
     

    转载于:https://www.cnblogs.com/liaolijun/p/7306570.html

    展开全文
  • // $()函数的另外一个作用:动态创建元素 var $span = $(“我是一个span元素”); 2.添加元素 append() 作用:在被选元素内部最后一个子元素(或内容)后面插入内容(页面中存在或者创建出来的元素都可以) /...

    节点操作

    1.动态创建元素
    // $()函数的另外一个作用:动态创建元素
    var $span = $(“<span>我是一个span元素</span>”);

    2.添加元素
    append()
    作用:在被选元素内部的最后一个子元素(或内容)后面插入内容(页面中存在或者创建出来的元素都可以)
    //在$(selector)中追加$node
    $(selector).append($node);
    //在$(selector)中追加div元素,参数为htmlString
    $(selector).append('<div></div>');

    如果是页面中存在的元素,那么调用append()后,会把这个元素从原先的位置移除,然后再插入到新的位置。

    如果给多个目标追加一个元素,append()方法内部会将这个元素复制多份,然后追加到多个目标中。(最好不要这么做)

    常用参数:htmlString 或 jQuery对象


    不常用操作(了解即可):(用法跟append()方法基本一致)

     


    appendTo()

    作用:同append(),区别是:把$(selector)追加到node中去
    $(selector).appendTo(node);


    prepend()

    作用:在元素的第一个子元素前面追加内容或节点
    $(selector).prepend(node);


    after()

    作用:在被选元素之后,作为兄弟元素插入内容或节点
    $(selector).after(node);


    before()

    作用:在被选元素之前,作为兄弟元素插入内容或节点
    $(selector).before(node);


     


    3.html创建元素(推荐)

    作用:设置或返回所选元素的html内容(包括 HTML 标记)

    设置内容的时候,如果是html标记,会动态创建元素,此时作用跟JS里面的innerHTML属性相同
    // 动态创建元素
    $(selector).html(‘<span>传智播客</span>’);
    // 获取html内容
    $(selector).html();



    4.清空元素
    //清空指定元素的所有子元素
    $(selector).empty();
    $(selector).html(“”);
    //”自杀”把自己(包括所有内部元素)从文档中删除掉
    $(selector).remove();

    如果有事件,使用html("")方法清空节点并不会清除事件,而empty方法则会清除元素上的所有事件,因此推荐使用empty方法清空节点



    5.复制元素
    // 复制$(selector)所匹配到的元素
    // 返回值为复制的新元素
    $(selector).clone();






    展开全文
  • JQueryDOM之创建节点

    2019-02-23 15:18:24
    创建节点 创建元素节点 创建元素节点并且把节点作为&lt;ul&gt;元素的子节点添加到DOM节点树上。 先创建元素点,创建元素节点使用Jquery的工厂函数$()来完成, 格式如下: $(html),该方法会根据传入的...

    创建节点


    创建元素节点

    创建元素节点并且把节点作为<ul>元素的子节点添加到DOM节点树上。
        先创建元素点,创建元素节点使用Jquery的工厂函数$()来完成,
        格式如下:
        $(html),该方法会根据传入的html字符串返回一个DOM对象,并将DOM对象包装成一个JQuery对象后返回。创建一个元素节点JQuery代码如下:
             $li1=$("<li></li>")
    代码返回$li1就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下:
             $("ul").append($li1); 
    添加后页面中只能看到<li>元素默认的"·",由于没有为节点添加文本所以只显示默认符号,下面创建文本节点。

    创建文本节点

    使用JQuery的$()同样能够创建文本节点,创建文本节点的JQuery代码如下:
          $li2=$("<li>菠萝</li>");
    代码返回$li2就是一个由DOM对象包装成JQuery对象,把新建的文本节点添加到DOM树中JQuery代码如下:
             $("ul").append($li2);

    创建属性节点

    $li3=$("<li title='菠萝'>菠萝</li>"); 
             代码返回$li3也是一个由DOM对象包装成JQuery对象,把新建的属性节点添加到DOM树中JQuery代码如下:
             $("ul").append($li3);

    案例代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>DOM创建节点</title>
             <script src="../js/jquery-3.1.1.js"></script>
        <script>
        	$(function(){
        		//$(html):这个HTML代码我可以一次性创建元素节点,属性节点,文本节点
        		//创建一个li元素西瓜
        		$("#btn1").click(function(){
        			//返回值是对应的jquery对象
        			//1.创建了一个li元素西瓜
        			var $li=$("<li>西瓜</li>");
        			//2.把创建好的元素节点添加到ul中
        			$("ul").append($li);
        			
        			//创建一个li元素节点菠萝,并设置title属性值为菠萝
        			var $li1=$("<li title='菠萝'>菠萝</li>");
        			$("ul").append($li1);
        		})
            
        	})
        	
        </script>
    </head>
    <body>
        <h3>DOM树</h3>
        <p title="水果">你喜欢的水果是?</p>
        <ul>
            <li title="苹果">苹果</li>
            <li title="桔子">桔子</li>
            <li title="香蕉">香蕉</li>
        </ul>
        <button id="btn1">创建元素节点</button>
    </body>
    </html>

     

    展开全文
  •  1、创建节点 document.createElement  2、添加节点一些属性 setAttribute innerHTML  3、加入到文档中 appendChild 2、jquery节点创建与属性处理  通过$()函数处理,$('html结构')  $("<div class...
  • jQuery--创建节点

    2019-10-02 11:15:06
    创建节点 根据W3C中的HTML DOM标准,HTML文档的所有内容都是节点,包括文档节点、元素节点、文本节点、属性节点和注释节点。各种节点相互关联,共同形成了DOM树。 在页面中添加元素时,首先要找到该元素的上一级节点...
  • jQuery_创建节点及插入节点

    万次阅读 2017-01-09 00:57:17
    创建节点:使用 jQuery 工厂函数$(): $(html); 会根据传入html 标记字符串创建一个DOM 对象, 并把这个DOM 对象包装成一个jQuery对象返回. •注意: –动态创建新元素节点不会被自动添加到文档中,而是需要...
  • 创建节点使用Jquery工厂函数$ (): $ (html);根据传入HTML标记字符串就会创建一个DOM对象。Jquery就会把这个DOM对象包装成一个Jquery对象。 注意:动态创建额新元素节点不会自动添加到文档中。而是需要使用其他...
  • 定义一个空类型的函数,形参为头指针,尾指针,和结构体中所含变量(举我自己的代码为例子:仅有一个变量id),声明一个同种类型的结构体指针,将其放在堆区开辟新的空间,传入参数,新创建的结构体指针指向NULL;...
  • JS函数封装(创建指定的元素类型、id、class、内容、事件) 最近学习时候看视频...利用这函数可以直接创建一个你想要的元素节点 function CreateElement(type,id,classname,content,Event){ var Element = docu...
  • XML DOM 创建节点尝试一下 - 实例下面实例使用 XML 文件 books.xml。函数 loadXMLDoc(),位于外部 JavaScript 中,用于加载 XML 文件。创建元素节点本例使用 createElement() 来创建一个新的元素节点,并使用 ...
  • jQuery节点创建与属性处理 创建元素节点: ...可以有几种方式,常见就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$("html结构") ...与创建元素节点同样方式 $("我是文
  • XML DOM 创建节点

    2008-09-11 10:43:23
    实例 下面例子使用 XML 文件 books.xml。...本例使用 createElement() 来创建一个新的元素节点,并使用 appendChild() 把它添加到一个节点。 通过使用 createAttribute 来创建属性节点 本例使用 creat...
  • 创建节点:  使用 jQuery 工厂函数 $(): $(html); 会根据传入 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回。 注意:  动态创建新元素节点不会被自动添加到文档中, ...
  • Jquery节点创建

    2019-03-31 18:56:51
    我们用得最多的就是直接把这个节点的结构给通过HTML标字符串给描述出来,通过美元符号加小括号的函数进行处理,如:$(“ HTML字符串”) 如图:(图片代码来源:jQuery离线手册) 创建元素节点对的属性用得最多的俩...
  • Node()构造函数没有问题,但是当您尝试使用以前生成的节点创建元素时,它会向您显示以下错误警告:在运行脚本之前,部件网格在Abaqus CAE树(part Recuadro)中显示为空,运行脚本后不再为空,因此我知道网格已经生成...
  • 常见就是直接把这个节点的结构给通过HTML标记字符串描述出来,通过$()函数处理,$("html结构") $("") 创建为本节点: 与创建元素节点类似,可以直接把文本内容一并描述 $("我是文本节点") 创建...
  • 事件源:触发(被)事件的元素 事件类型:事件触发方式(例如鼠标点击或键盘点击) 事件处理程序:事件触发后要执行代码(函数形式) 事件基本使用 var box = document.getElementById('box'); box.oncli...
  • 上一节介绍了通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐。我们可以通过使用jQuery来简化了这个过程 创建元素节点: 可以有几种方式,后面会慢慢接触。常见就是直接把这个节点结构给通过...
  • TinyXML中节点元素的关系

    千次阅读 2007-12-26 17:09:00
    TiXMLNode 类 和 TiXMLElement 类在使用InsertBeforeChild()函数时遇到问题这个函数的... 后经仔细阅读源代码发现:创建一个TiXMLNode类对象,然后用ToElement函数节点转换成元素。1,调用InsertBeforeChild函
  •  1.文档:DOM中的“D” 当创建了一个网页并把它加载到Web浏览器...只能通过某个特定对象去调用的函数称为这个对象的方法。 js中对象分为三种: (1)用户自定义对象 (2)内建对象:内建在js中的对象。包括
  • 实现步骤:   第一步:确定事件(onchange)并为其绑定一个函数 第二步:创建一个二维数组用于存储省份和城市 ...第八步:创建option元素节点 第九步:将城市文本节点添加到option元素节点中去 第十步...
  • 插入节点,旧节点 )功能:将插入的节点插入到旧节点之前举个小例子:创建一个strong节点,将这个节点插入到span节点之前我们先把封装好的函数引入进来:我们来通过上节封装的函数,来创建一个strong节点运行结果如下...
  • 广义表的创建及成员函数的实现

    千次阅读 2016-04-20 10:44:59
    广义表是非线性结构,是线性表一种扩展,是有n个元素组成有限序列。 广义表定义是递归,因为在表描述中又得到了表,允许表中有表。 例如: (1)A = () (2)B = (a,b) (3)C = (a,b,(c,d)) (4)D =...
  • 创建节点 格式如下: 新标签(元素节点) = document.createElement("标签名"); 比如,如果我们想创建一个li标签,或者是创建一个不存在adbc标签,可以这样做: <script type="text/javascript"> var a1 ...
  • 递归寻找页面所有元素节点

    千次阅读 2016-10-25 00:37:06
    //创建一个回调函数寻找所有元素节点 function queryNode(node) { //查询所有子节点并且放到nodeList这个数组中 var nodeList = node.childNodes; //定义一个数组,用来存放符合要求的元素节点 var arrNode = [];...
  • jQuery简介 1. 介绍 jQuery是JavaScript工具库,对原生..."$()"函数用于获取元素节点创建元素节点或将原生JavaScript对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象,包含了一系列

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 876
精华内容 350
关键字:

创建节点元素的函数