js创建元素的几种方式

最新推荐文章于 2022-10-06 15:11:43 发布
最新推荐文章于 2022-10-06 15:11:43 发布
阅读量919 收藏 4
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwj13603571674/article/details/103826646
版权

1.使用createElement(“标签名”)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .red {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function (ev) {
            //第一步：创建一个div元素对象
            var div = document.createElement("div")
            //第二步，给div添加样式
            div.setAttribute("class", "red")
            //第三步，将div添加到body里面
            document.body.appendChild(div)
        }
    </script>
</head>
<body>

</body>

2.使用innerhtml添加

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .red {
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function (ev) {
        //将body里面的html代码修改为如下
           document.body.innerHTML="<div class='red'></div>"
        }
    </script>
</head>
<body>
</body>

3.document.write(“html代码”)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script type="text/javascript">
        window.onload = function (ev) {
          document.write("<p>djsjl</p>")
        }
    </script>
</head>
<body>
</body>
半栈学徒
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS动态添加div，然后在div中添加元素
创造自我、追求无我
04-09 6万+
需求：    组织部中有个这样的需求，根据年份动态显示该年份下的定性指标！   我的做法：         先是放一个空的div，让后根据指标的数据，动态的往div中添加元素。 代码：  空的div，存放定性指标 动态往div中添加元素： for (var n = 0; n < data.length; n++) {
JS DOM基本操作之创建、插入、删除、替换节点操作
qq_45560350的博客
08-23 4246
创建dom节点（并未添加到页面中，一般配合插入方法使用） document.createElement(); 创建一个元素节点 var div = document.createElement('div'); 可以看到虽然创建了div节点，但页面中并没有显示 因为这里只是创建div节点，并没有把它添加到页面中 document.createTextNode(); 创建一个文本节点 var text = document.createTextNode('殷志源'); 没有添加到页面中 do
带你彻底学会JS DOM技术之创建，插入元素
大河之犬的博客
10-06 4671
所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”
js元素创建的三种方式
m0_37850231的博客
09-12 272
1.document.write(“标签代码及内容”); <body> <input type="button" value="创建一个p" id="btn"/>原本的元素 <script src="common.js"></script> <script> document.getElementById("btn").onclick...
js动态创建div等元素实例
03-19
js动态创建div等元素实例.动态创建div，子元素，select下拉框，单选按钮。等待
js 动态创建div并向其中添加元素
zcn596785154的博客
09-21 8181
CSS样式文件search_history.cssdiv{ width:95%; height:40px; vertical-align: middle; line-height:36px;/**设置行高和控件高一样，这是内部文字才能垂直居中*/ overflow:hidden;/**为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了*/
动态加载js的几种方法
12-12
1.直接[removed] [removed] [removed]([removed]<\/script>); [removed] 2.动态改变已有script的src属性 ...动态创建script元素 [removed] var s2 = document.createElement(script); s2.src=test.js documen
javascript数组定义的几种方法
11-29
数组可以存储任何数据类型的数据（比如说一个元素保存整型，一个元素保存字符串型，这个在JS中是可以的） 创建数组的语法： var arr=[值1,值2,值3]; //隐式创建 var arr=new Array(值1,值2,值3); //直接实例化 var...
项目中实现图片懒加载的几种方式
最新发布
07-25
创建一个IntersectionObserver实例，设置观察的目标元素和回调函数，当元素与视口有交集时，回调函数会被调用，从而触发图片的加载。 4. **vue-lazyload 插件**： 在Vue项目中，可以利用vue-lazyload插件来实现...
JavaScript几种形式的树结构菜单
12-10
1.悬浮层树(Tree) 这种树结构实现类似面包屑导航功能，监听的是节点...老掉牙的问题，这里是采用在每个悬浮层后面加个iframe元素，当然同一级的菜单只产生一个iframe元素，菜单有几级将产生几个iframe遮掩，然后菜单显
JS实现添加,替换,删除节点元素的方法
10-22
主要介绍了JS实现添加,替换,删除节点元素的方法,实例分析了javascript针对节点元素的替换、删除及常用的几种添加技巧,需要的朋友可以参考下
js vue 创建一个div_怎么用js添加一个div?
weixin_39996096的博客
12-19 5570
用js添加一个div元素的代码：var oDiv=document.createElement('div');//创建一个div元素；拓展资料JavaScript中，createElement() 方法可创建元素节点，此方法可返回一个 Element 对象。例子：创建一个新的并且插入到ID为“div1”的元素前。html：html>createElementThe text above ha...
js创建元素并添加的几种方法
胡图图不糊涂的博客
03-14 1万+
一、js原始代码的方法和属性 1、appendChild（）和createElement（） var tab=document.querySelector('#container'); var p=document.createElement('p'); //p标签 tab.appendChild(p); //添加到最后面 只能创建标签，不能添加里面的内...
js之事件，dom，动画
caoyuan258的博客
12-06 287
JS中存在三种对象：自定义对象 、 内置对象 、宿主对象 宿主对象：js脚本执行环境所提供的对象，在这个阶段，js脚本在浏览器中执行，那么这里要讲的宿主对象就是浏览器对象 那么想要了解浏览器对象，就要了解浏览器对象模型； 浏览器对象模型：也就是BOM(Browser Object Model),用来进行窗口与窗口之间的通讯，这个可以看出来窗口是一个关键； 窗口对象：也就是Window对象，是BOM中的顶级对象，也可以看作是脚本中的全局对象window 重点：BOM 浏览器对象模型
JS 创建元素的三种方法
weixin_30718391的博客
03-19 220
1、动态创建元素一 document.write() 　　例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script>...
js添加元素
上善若水
09-25 1427
用js创建一个可拖曳的元素
E_li_na的博客
10-23 1233
我们一直使用并且理所当然的常见手势是能够在屏幕上拖动元素。尽管这种拖拽手势有多么常见，但是没有很好的内置支持来使网络上的元素可拖动。如果我们希望超越鼠标并支持触摸之类的东西，那就更是如此！这就是本教程的用武之地。在接下来的几节中，我们将介绍一个纯粹的基于JavaScript的解决方案（也就是没有jQuery），它允许您将任何无聊的元素转换为可以在页面上拖动的元素。 继续~ 1.例子 原文链接 2....
JS中添加元素的方法
前端日月明
03-18 1万+
append():前面是被插入的对象。最后面增加子元素，父子级关系。 appendto():后面是被插入对象。最后面增加子元素，父子级关系。 prepend():前面是被插入对象。最前面增加子元素，父子级关系。 prependTo():后面是插入对象。最前面增加子元素，父子级关系。 before():前面是插入对象。之前增加元素，同级关系。 after():前面是插入对象。之后加入元素，同级关系...
js 动态创建HTML元素
热门推荐
lanzhengwu的专栏
12-25 2万+
今天有个朋友要帮她完成一个小小的效果,发了点时间做了下,也不知道能不能达到要求,先帖了上来,下面是要求: 代码:textarea cols="60" rows="12">textarea> br/>选择答题数目:select  name="select1" id="select1" onchange="change1(this);">option value=0>请选择option
说说flex布局 javascript 创建对象的几种方式
05-27
2. 在JavaScript中，创建对象的方式有以下几种： - 使用对象字面量的方式： ``` var obj = { name: 'John', age: 18, gender: 'male' }; ``` - 使用构造函数的方式： ``` function Person(name, age,...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值