javascript createElement的两种方式

最新推荐文章于 2024-05-28 00:30:00 发布
最新推荐文章于 2024-05-28 00:30:00 发布
阅读量9.1k 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limlimlim/article/details/8442312
版权
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
    <title>CreateElement的两种创建方式</title>
    <script type="text/javascript">
        function CreateButton1() {
            var btn = document.createElement("input");
            btn.type = "button";
            btn.value = "我是动态创建的1";
            btn.onclick = function () {
                alert(this.value);
            }
            document.body.appendChild(btn);
        }
        function CreateButton2() {
            var btn = document.createElement("<input type='button' value='我是动态创建的2' " +
                                                "οnclick='OnClick2(this)' />");
            document.body.appendChild(btn);
        }
        function OnClick2(btn) {
            alert(btn.value);
        }
        function CreateLink() {
            var link = document.createElement("<a href='http://www.baidu.com'>百度</a>");
            //注意这里链接的文本“百度”是不会显示出来的，必须设置innerText或innerHTML
            link.innerText = "百毒";
            document.body.appendChild(link);
        }
        function CreateLabel() {
            var lbl = document.createElement("label");
            lbl.setAttribute("for", "userName");
            lbl.setAttribute("myAge", "12");           //可以设置自定义标示
            lbl.innerText = "用户名:";
            document.body.appendChild(lbl);
        }
    </script>
</head>
<body>
    <input type="button" value="动态创建按钮1" οnclick="CreateButton1()" />
    <input type="button" value="动态创建按钮2" οnclick="CreateButton2()" />
    <input type="button" value="动态创建链接" οnclick="CreateLink()" />
    <input type="button" value="动态创建Label" οnclick="CreateLabel()" />
    <input type="text" id="userName" value="李莫" />
</body>
</html>
永远爱好写程序
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
常见的原生javascript DOM操作
weixin_34121304的博客
12-01 369
打个招聘广告： 杭州 阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@qq.com 看图识文（取自 寒冬winter 的微博）。文章里引用了MDN和《javascript高级程序设计3》里的知识。如有不对的地方，敬请指出。 1.创建元素 创建元素：document....
createElement
qiaoyuetian博客访谈
11-05 684
createElement 创建 HTML 元素，在 IE4.0 中只能创建 img、area、option，不过在 IE5 中，我们可以创建除 frame、iframe 以外的所有元素。语法：oElement = document.createElement(sTag)sTag 要创建的元素名字，如：img、select、input，字符串类型。返回值：返回新元素的引用。
Javascript 创建新节点 document.createElement()
最新发布
大剑师兰特的GIS世界
05-28 1118
在JavaScript中，创建新节点是DOM操作的重要组成部分，它允许你动态地向文档中添加内容。以下是创建新节点的详细说明、示例代码、注意事项以及常见应用场景。
javascript createelement_JavaScript 深度学习 Hello World
weixin_39874795的博客
11-29 96
为了更好的阅读体验，欢迎语雀搜索 【JavaScript 深度学习】 关注NO.11. 前言2017年的双十一为了解决运营图片审核任务繁重的问题，我们发起了素材智能审核项目。在这个项目中，我们基于深度学习拿到了很好的项目结果，至今已经审核数千万张图片。后续我们也尝试做一个 JavaScript 版本 TensorFlow -Tens.js(https://github.com/tens...
JS中document.createElement()的用法
【Erica W】有问题，就问神奇海螺吧！
11-12 1万+
分析代码时，发现自己的盲点——document.createElement()，冲浪一番，总结了点经验。 document.createElement()是在对象中**创建一个对象**，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插
js中createElement的使用
乘风破浪
02-21 9600
//创建form var _form=document.createElement_x('form'); _form.setAttribute('name','myform'); _form.setAttribute('action',''); _form.setAttribute('method','post'); //创建表 var _table=document.createEl
javascript中createElement的两种创建方式
10-24
主要介绍了javascript中createElement的两种创建方式,具有一定参考借鉴价值,需要的朋友可以参考下
javascript中createElement的两种创建方式.docx
01-13
javascript中createElement的两种创建方式.docx
JavaScript：createElement和insertBefore
01-07
obj = document.createElement(tag)创建一个标签，oParent.appendChild(obj)和oParent.insertBefore(obj,element)都是由要插入... 两种方式 createElement和appendChild完整示例 learn js [removed] = function(){
动态加载JavaScript文件的两种方法
11-24
本文将详细介绍两种动态加载JavaScript文件的方法。 首先，第一种方法是利用AJAX（Asynchronous JavaScript and XML）技术。AJAX通常用于后台与服务器进行异步数据交换，但在这里，它被用来获取JavaScript文件的...
在js中使用createElement创建HTML对象和元素
热门推荐
hgc0221的博客
10-20 3万+
在js中使用createElement创建HTML对象和元素
浅谈javascript中createElement事件
12-09
createElement是HTML中应用W3C DOM对像模型建立子节点也就是子元素的概念 代码如下:  [removed]    [removed] = function () {    var input  = document.createElement(‘input’);    var button = document.createElement(‘input’);    input.type =’text’;     input.id= ‘text’;    input.value =’1′;    button.type=’button’;    button.val
javascript createElement()创建input不能设置name属性的解决方法
12-01
其中obj.name = “select”;这句话并不能起到预期的作用，无论是看生成后的HTML代码还是观察使用document.getElementsByName()获取的数组长度，都会发现这个name设置并没有起作用。当然这种情况只出现在IE6和IE7中，而在FireFox中是没有问题的。 　 　　Test 　 　 　　 　　 　　 　　 　 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 　　当然解决方法很简单，在创建时，使用document.createElement(“<input name=’select’>”)。不过还不知道是什么原因？ 　　在Name属性的
JS自定义元素节点/属性的使用 createElement、setAttribute、getAttribute、appendChild
weixin_49602426的博客
08-27 2720
顾名思义，自定义也就是自己创建一个，通过JS生成节点或者属性，而不是在html里写的。setAttribute(name, value)：设置/添加元素节点的属性，有则设置，无则添加；获取元素节点的属性；removeAttribute：清除属性；...
你不知道的window.URL
liuhao9999的博客
11-19 1527
URL接口用于解析，构造，规范化和编码URLs。 它通过提供允许您轻松阅读和修改URL组件的属性来工作。 通常，通过在调用URL的构造函数时将URL指定为字符串或提供相对URL和基本URL来创建新的URL对象。 然后，您可以轻松读取URL的已解析组成部分或对URL进行更改。 如果浏览器尚不支持URL()构造函数，则可以使用Window中的Window.URL属性。 确保检查您的任何目标浏览器是否要求对此添加前缀。 Note:此特性在Web Worker中可用。 构造器 new URL() ...
javascript技巧之——document.createElement()的用法
lifushan123的专栏
01-05 2465
document_createElement_x_x()的用法       分析代码时，发现自己的盲点——document_createElement_x_x()，冲浪一番，总结了点经验。         document_createElement_x_x()是在对象中创建一个对象，要与a() 或 insertBefore()方法联合使用。其中，a() 方法在节点的子节点列表末添加新
javaScript面试题之生成十个按钮，每次点击的时候弹出1-10
m0_56026872的博客
06-22 642
一、使用自定义函数 for (i = 1; i <= 10; i++) { (function (i) { var btn = document.createElement("button"); btn.innerText = i; btn.onclick = function () { alert(i); } document.body.appendChild(btn); })(i
用两种方式在js中把map放入select
07-13
在这两种方式中，首先创建了一个Map对象`myMap`，然后通过遍历Map中的键值对来创建option元素，并设置其值和文本内容，最后将option元素添加到select元素中。 这样，你就可以使用原生JavaScript或jQuery将Map放入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值