javascript和jquery动态创建html元素

1.javascript创建元素

创建select

var select = document.createElement("select");
        elect.options[0] = new Option("加载项1", "value1");
       select.options[1] = new Option("加载项2", "value2");
       select.size = "2";
       testDiv.appendChild(select);
    创建div

var openDiv = document.createElement("div");
        openDiv.id = "div3D";
        openDiv.style.width = w+"px";
        openDiv.style.height = h+"px";
        openDiv.innerHTML = strHtml;
        document.body.appendChild(openDiv);

2.jquery创建元素

function CreateDom() {
               var select = $("<select/>").appendTo($("body"));
            var option1 = $("<option value=\"1\">text1</option>").appendTo(select);
            var option2 = $("<option value=\"2\">text2</option>").appendTo(select);
            var option3 = $("<option value=\"3\">text3</option>").appendTo(select);
            var text = $("<input type=\"text\">").css({ "width": "150px", "border": "1px lightgrey solid" }).appendTo($("body"));
            var checkbox = $("<input type=\"checkbox\" />").appendTo($("body"));
            var ul = $("<ul/>").appendTo($("body"));
            var li = $("<li>li1</li>").appendTo(ul);
            var li = $("<li>li2</li>").appendTo(ul);

}

分类: javascript或jQuery

时间: 2024-07-31 02:49:26

javascript和jquery动态创建html元素的相关文章

jQuery动态创建html元素的常用方法汇总

在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到数组中,再遍历数组动态创建html元素 3.使用模版 1.使用jQuery动态创建元素追加到jQuery对象上. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <

基于jQuery动态创建html元素

在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了. 常见的动态创建HTML元素的方式,有如下几种,大体都差不多! html 函数: 1 var eleHtml = "<div id='newone'> xxx </div>'"; 2 jQuery(your_specified_selector).html(eleHtml) append 函数: 1 var eleHtm

JavaScript动态创建HTML元素

用ajax时会用到js的动态创建HTML元素,这里简单的讲一下方法: 先分析一下HTML元素 <span style="font-size:18px;"><body></span> <font color="red" size="12">红色<p>换行</p></font> </body> 包括HTML元素的名称.属性.和内容 <名称 属性1=&

Jquery 动态添加删除元素 用js添加的元素无法删除问题

用jquery方法的绑定侦听和销毁来解决动态div的增加删除: 正确代码: <script type="text/javascript" > $(document).ready(function(){  bindListener(); }) function addimg(){  $("#mdiv").append('<div ><input type="file" name="img[]" /&

javascript如何实现动态创建表格和增加表格的行

javascript如何实现动态创建表格和增加表格的行:在实际应用中,表格的行数不一定都是符合实际要求的,可能需要动态的增加表格的行数,下面就是一段实现此功能的代码实例,并且还实现了隔行变色功能.有需要的朋友可以自行分析一下代码,非常的简单,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态操作表格</title> </

用JS动态创建SVG元素并绑定事件

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", "800"); svg.setAttribute("height", "500"); svg.addEventListener("load", function () {

动态创建的元素怎么做动画

要做动画,一般都是要获取元素的一些基本属性,比如宽,高,颜色等 但是对于动态创建的元素,是不能获取这些属性的 只有插入到dom中,经过渲染才能获取这些属性 但是一旦插入到dom当中,先获取在改变就会有跳动的效果 为了避免这种情况,有两种解决方案 一种是将元素设置绝对定位,获取之后然后在放到正确位置,这种情况一般用在弹出框的居中显示中 一种是将元素设置成visibility:hidden;overflow:hidden;height:0; 然后获取scorllHeight,scrollWidth

给Jquery动态添加的元素添加事件

给Jquery动态添加的元素添加事件 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. <table>    <tbody>        <tr>        

jQuery动态添加的元素绑定事件处理函数代码

jQuery动态添加的元素绑定事件处理函数代码 作者: 字体:[增加 减小] 类型:转载 有一段时间没用jquery了,今天又碰到这个问题.当时是知道有livejquery可以解决.但是我并不喜欢为了这个而另外加载一个. 我当时的处理方法是在添加的时候手工绑定事件处理函数.不过新版的jquery已经添加了这个功能.我们已经不需要为此烦恼了. 参考:http://api.jquery.com/live/ 以前我们定义事件,比如为元素定义单击事件是这样写的: 复制代码 代码如下: $('input'