JavaScript元素创建的方式（一）

最新推荐文章于 2022-05-14 18:11:59 发布
最新推荐文章于 2022-05-14 18:11:59 发布
阅读量194 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80933822
版权

元素的创建，是为了提高用户的体验

元素创建有三种方式：

1、document.write("标签的代码及内容");

2、对象.innerHTML = "标签及代码";

3、document.createElement("标签的名字");

1、document.write("标签的代码及内容");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<h1>我是标题一</h1>
<p>我是一个段落</p>
<h3>我是标题三</h3>

<script>
    document.getElementById("btn").onclick = function(){
        document.write("<p>这是三只小狗</p><img src='1.jpg' alt='三只小狗'/>");
    };
</script>
</body>
</html>

点击按钮前：


点击按钮后：


document.write("标签的代码及内容"); 创建元素，缺陷：如果是在页面加载完成后，通过这种方式创建元素，那么页面上之前存在的所有内容全部被干掉了。页面加载过程中，用这种方式，原本的内容还有。

2、对象.innerHTML = "标签及代码";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<h1>我是标题一</h1>
<p>我是一个段落</p>
<h3>我是标题三</h3>
<div id="box" style="border:1px solid red; width: 400px;">
我是一个盒子
</div>

<script>
    document.getElementById("btn").onclick = function(){
        document.getElementById("box").innerHTML = "<p>这是三只小狗</p><img src='1.jpg' alt='三只小狗'/>";
    };
</script>
</body>
</html>

点击按钮前：


点击按钮后：

 盒子中原本的内容没有了。出现的新创建的内容

3、document.createElement("标签的名字");

第一步：document.createElement("标签的名字"); 创建了一个元素

第二步：把元素追加到父级元素当中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<h1>我是标题一</h1>
<p>我是一个段落</p>
<h3>我是标题三</h3>
<div id="box" style="border:1px solid red; width: 400px;">
我是一个盒子
</div>

<script>
    var box = document.getElementById("box");
    document.getElementById("btn").onclick = function(){
        //创建一个p元素
        var pObj = document.createElement("p");
        pObj.innerHTML = "这是三只小狗";
        //那创建的元素追加到父元素中
        box.appendChild(pObj);
        //创建一个img元素
        var imgObj = document.createElement("img");
        imgObj.src = "1.jpg";
        imgObj.alt = "三只小狗";
        //那创建的元素追加到父元素中
        box.appendChild(imgObj);
    };
</script>

</body>
</html>

点击按钮前：


点击按钮后：

 盒子中原本的内容还在，新建的元素追加到了父元素的后面。

sleepwalker_1992
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用 JavaScript 创建一个兔年春节倒数计时器
努力是为了站在万人之中，成为别人的光
01-06 1万+
我们可以通过多种方式构建 JavaScript 倒数计时，我在本教程中展示的这个兔年春节倒数计时器 是由 HTML CSS 和 JavaScript 创建的。 码上掘金地址：https://code.juejin.cn/pen/7185452719165931572 它的工作方式非常简单，需要两种类型的时间。我们要运行倒计时的当前时间和特定时间，必须手动添加计时器倒计时，JavaScript 的new Date()用于捕获当前时间。new Date ()是一种 JavaScript 方法，从设备获取当前
JavaScript 创建元素的三种方式
流楚丶格念的博客
08-19 4267
文章目录创建元素的三种方式document.write()innerHTMLdocument.createElement()性能问题案例动态创建列表，高亮显示根据数据动态创建表格 创建元素的三种方式 document.write() document.write('新设置的内容<p>标签也可以生成</p>'); document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉= <!DOCTYPE htm
JavaScript创建元素的三种方式
Potry Code的博客
08-05 8814
第一种：document.write(“标签的代码及内容”)； document.write('新设置的内容<p>标签也可以生成</p>'); 该方法的缺陷：如果是在页面加载完毕后，此时通过这种方式创建元素，会将页面原来的内容冲刷掉，从而只显示输出内容。(不推荐) 第二种：对象.innerHTML=“标签代码及内容”; var box = document.getElem...
JavaScript 创建元素
m0_55201788的博客
01-15 2060
三种创建元素方式 document.write () element .innerHTML document.createElement () 1. document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘（重新加载一个新的只包含该内容的页面） 2. innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘 3. innerHTMr创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂 4. createElement ()创..
JavaScript中元素创建的三种方式
秦哥的博客
09-23 1万+
目录 0.码仙励志 1. document.write("标签的代码及内容"); 2. 对象.innerHTML="标签及代码"; 3. document.createElement("标签的名字"); 4.元素相关的方法 1.insertBefore( )   在某个元素之前插入一个新的元素 2.replaceChild( )   替换某个元素 3.removeChild( ) ...
JavaScript 添加一个元素标签
weixin_44493841的博客
04-07 3119
JavaScript 添加一个元素标签 文章目录JavaScript 添加一个元素标签代码效果 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div id="div1"> <p id="p1">这是一个段落。</p&gt
JavaScript创建元素相同的数组
qq_33758085的博客
07-30 4062
假设元素的重复数量为N, 元素值为Value 第一种方式： var arr = Array.apply(null,new Array(N)).map((item)=>{ return Value }) 用apply是因为直接new Array(N)的空数组无法被 map() 遍历 第二种方式： var arr = Array( N ).fill( Value ) ...
javascript创建元素和删除元素
知行合一
05-25 1747
1、创建元素动态创建新的DOM元素，是js操作网页对象模型的重要手段之一。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建新元素</title> <script type="text/javascript"> //创建新元素 function cre
JS学习--利用javascript创建元素的4种方法
weixin_48084293的博客
06-04 4895
文章目录先总结4种方法1. document.write()；2. element.innerHTML3. document.creatElment()4. 采用数组创建的方式遇到的问题 这个知识点学习也有几天了，今天在做轮播图效果时被坑了一下耽误了很长时间，所以从重新在总结巩固一下。 先总结4种方法 1. document.write()； var btn = document.querySelector('button'); btn.onclick = function () {
Javascript创建对象的七种常用方式
KANGCHUNHUANG的博客
03-29 1万+
js常用的几种创建对象的方式有： {} new Ｏbject() 使用字面量 工厂模式 构造函数模式（constructor） 原型模式（prototype） 构造函数+原型模式 还有一些不常用的方式，如动态原型，寄生构造函数，稳妥构造函数。 一、通过{}创建对象 <script> 'use strict'; //使用strict模式 /** 使用{}创建对象，等同于 new Object(); **/ var
javascript元素动态创建实现方法
10-24
主要介绍了javascript元素动态创建实现方法,涉及javascript操作元素的相关技巧,需要的朋友可以参考下
javascript动态创建及删除元素的方法
10-25
主要介绍了javascript动态创建及删除元素的方法,涉及针对DOM元素操作的技巧,非常具有实用价值,需要的朋友可以参考下
javascript创建元素和删除元素实例小结
10-16
主要介绍了javascript创建元素和删除元素,结合实例形式总结分析了javascript针对页面元素的动态创建、删除及子元素操作相关实现技巧,需要的朋友可以参考下
javascript与jquery动态创建html元素示例
10-21
主要介绍了javascript与jquery动态创建html元素的方法,结合实例形式分析了javascript与jQuery动态创建页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
如何把局部变量变成全局变量
热门推荐
sleepwalker_1992的专栏
07-05 2万+
自调用函数的两种形式： //第一种自调用方式 (function(形参){ var num =10; //局部变量，外部访问不到 })(实参); //第二种自调用方式 (function(形参){ var num =10; //局部变量，外部访问不到 }(实参));自调用函数在页面加载完成后，代码也就执行完了。局部...
document.body.scrollTop的值总为零的解决办法
sleepwalker_1992的专栏
06-13 2万+
1、document.body.scrollTop的值总为零的原因 有一个功能需要判断下拉的距离，设置头部固定导航栏的颜色。 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" c
HTML5 Web 存储（localStorage和sessionStorage）
sleepwalker_1992的专栏
09-24 1万+
HTML5 Web 存储是本地存储，存储在客户端，包括localStorage和sessionStorage。HTML5 Web 存储是以键/值对的形式存储的，通常以字符串存储。 localStorage localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通...
JavaScript比较两个数字的大小
sleepwalker_1992的专栏
05-14 1万+
JS中比较两个数字的大小，注意将字符串转换成数字再进行比较。同时注意超长数字比较问题。
JavaScript实现简单的元素显示和隐藏
sleepwalker_1992的专栏
06-27 5069
隐藏：display:none; 显示：display:block; 方法一：设置display样式 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &
JavaScript创建一个按钮元素
最新发布
06-08
要使用JavaScript创建一个按钮元素，可以使用DOM（文档对象模型）操作。以下是一个示例代码： ```html <!DOCTYPE html> // 创建按钮元素 var button = document.createElement("button"); // 设置按钮元素的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值