jQuery页面元素操作之创建节点元素

最新推荐文章于 2022-07-12 21:07:45 发布

weixin_34026276

最新推荐文章于 2022-07-12 21:07:45 发布

阅读量118

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/johnvwan/p/9588719.html

版权

本篇文章开始聊聊如何通过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 {
            ﬂoat: left;
            width: 200px;
            background-color: #eee;
            border: solid 1px #666;
            margin: 5px;
            padding: 0px 8px 0px 8px
        }

        .divR {
            ﬂoat: 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

weixin_34026276

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery页面元素操作之创建节点元素

本篇文章开始聊聊如何通过jQuery操作页面元素。一.创建节点元素函数 $() 用于动态创建页面元素，其语法格式如下：$(html)其中，参数 html 表示用于动态创建 DOM 元素的 HTML 标记字符串，即如果要在页面中动态创建一个 div 标记，并设置其内容和属性，可以加入如下代码：var $div = $("<div title='jQuery...
复制链接

扫一扫