JS 创建HTML元素的方法

最新推荐文章于 2024-04-25 00:00:00 发布
最新推荐文章于 2024-04-25 00:00:00 发布
阅读量1.5w 收藏 12
点赞数 2
分类专栏： js代码 文章标签： JS 创建元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guanmao4322/article/details/86585496
版权

元素创建的三种方式:
    * 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="创建一个p" id="btn"/>

<script src="common.js"></script>
<script>
  //document.write("标签代码及内容");
  my$("btn").onclick=function () {
    document.write("<p>这是一个p</p>");
  };
 // document.write("<p>这是一个p</p>");

  //document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉


</script>
</body>
</html>

缺陷:如果是

最低0.47元/天 解锁文章
夏沐_lk
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
自动生成html js,js生成html的方法
weixin_42162171的博客
05-31 2224
生成HTML的方法生成HTML的方法实在是太多了，我来讲讲我现在要讲的一个方法，想好一个从头到尾的思路，拿一个新闻系统作为实例．powered by 25175.net假设的两个表：news(ID,title,document,time),news_content(ID,news_id,username,document,time)文件名：我们将news的主键(ID)作为生成.HTML的文件名新建...
js原生创建html代码,原生js操作HTML DOM(示例代码)
weixin_30940057的博客
05-31 768
先上图1.一些常用的方法obj.getElementById()返回带有指定 ID 的元素。obj.getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。obj.etElementsByClassName()返回包含带有指定类名的所有元素的节点列表。obj.getElementsByName()方法可返回带有指定名称的对象的集合。//表单中na...
JS 添加数组元素（ 4种方法 ）
最新发布
大剑师兰特的GIS世界
04-25 4475
ush() 和 unshift() 方法会直接修改原数组。 splice() 方法同样会直接修改原数组，但它还可以用来同时删除和插入元素。 concat()方法不会改变原数组，而是返回一个新的数组。
js动态创建html元素的方法
三五月儿的专栏
01-15 1万+
js动态创建html元素需要使用到下面这些常见的js方法。 getElementById();//返回带有指定 ID 的元素。 getElementsByTagName();//返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 getElementsByClassName();//返回包含带有指定类名的所有元素的节点列表。 appendChild();//把新的子节点添加到指
原生JS向html页面添加内容节点元素代码段
奇乐软件开发踩坑日志
04-20 2万+
var div = document.createElement("div"); div.innerHTML = '&lt;a href="http://www.baidu.com/"&gt;&lt;img style="max-width:100%;" src="https://www.baidu.com/img/baidu_jgylogo3.gif"&gt;&lt;/a&gt;
通过JS动态创建一个html DOM元素并显示
12-10
近日，因工作需要，需要通过点击某个元素后， 动态创建一个DOM元素并显示，因此写了一些相关的JS函数，在此记录，以作备忘： /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 获取某个元素的位置 @obj 该元素的DOM对象，或该元素的ID */ function getObjec
js 动态创建 html元素
10-29
JavaScript动态创建HTML元素是网页开发中的一个重要技巧，它允许开发者在页面加载后或者用户交互时动态添加、修改或删除页面内容。在这个例子中，我们看到一个简单的应用，它使用JavaScript来创建并定位多个div元素...
javascript与jquery动态创建html元素示例
10-21
主要介绍了javascript与jquery动态创建html元素的方法,结合实例形式分析了javascript与jQuery动态创建页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript删除一个html元素节点的方法
10-25
在JavaScript中，删除HTML元素节点是一项常见的操作，特别是在动态构建页面或者进行DOM操作时。本文将详细介绍如何使用原生JavaScript来删除一个特定的HTML元素节点。 首先，我们需要了解DOM（Document Object ...
JS正则获取HTML元素的方法
10-20
本文将详细介绍如何使用JS正则表达式来获取HTML元素。 首先，我们需要理解HTML元素的基本结构。HTML元素通常由起始标签（如`<img>`）和结束标签（如`</img>`）组成，它们之间可以包含属性，如`src`、`target-type`...
JS动态创建html节点
08-11
1 var tt = document.getElementById("tr1"); for (var i = 0; i < 10; i++) { var FF = document.createElement(""); FF.innerText = 'td'+ i; tt.appendChild(FF); } ...............
Javascript小技巧之生成html元素
01-19
Javascript 生成 HTML元素的方法在本文中介绍2种，第一种是比较正规的创建元素方法，第二种是利用javascript中的write()方法直接写出html元素。 方法一： 代码如下:   //createElement()创建input元素到obj对象中   var obj = document.createElement(‘input’);   //选择要生成地点的前一个元素   var before = document.getElementById(‘before’);   //设置obj元素名，值      obj.name=’name’;      obj.value=
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
在js中使用createElement创建HTML对象和元素
热门推荐
hgc0221的博客
10-20 3万+
在js中使用createElement创建HTML对象和元素
如何动态的创建html元素,使用Javascript动态创建HTML元素？
weixin_35998791的博客
06-10 600
您可以使用document.createElement创建元素.创建后,您可以添加属性.如果希望元素显示在文档中,则必须插入到文档的DOM树中.尝试使用此代码：var body = document.getElementsByTagName('body')[0],newdiv = document.createElement('div'); //create a divnewdiv.id = ...
js生成html---查询数据后自动生成相对应的html展现内容
chenshu0的博客
11-02 3764
一些js的基本知识。
JavaScript动态生成HTML元素
LaoYe的博客
05-04 5359
动态添加HTML元素可以使用createElement（）方法创建一个指定的HTML元素 语法：var Obj = document.createElement（LabelName） 参数说明：   Obj：用来接收添加后返回的HTML元素标签，方便后续操作。 LabelName：指定创建的HTML标签名   创建子节点可以使用appendChild（）方法将新建节点和其他节点绑定子父...
js创建dom元素方法
04-27
JavaScript 创建 DOM 元素的方法有多种，以下是其中几种常见的方法： 1. 使用 document.createElement() 方法创建元素节点，例如： ``` var newDiv = document.createElement("div"); ``` 2. 使用 document.createTextNode() 方法创建文本节点，例如： ``` var text = document.createTextNode("Hello, World!"); ``` 3. 使用 innerHTML 属性向某个元素内添加 HTML 代码，例如： ``` document.getElementById("myDiv").innerHTML = "<p>Hello, World!</p>"; ``` 4. 使用 insertAdjacentHTML() 方法向某个元素添加 HTML 代码，例如： ``` document.getElementById("myDiv").insertAdjacentHTML("beforeend", "<p>Hello, World!</p>"); ``` 5. 使用字符串拼接的方式创建 HTML 代码，例如： ``` var html = "<div><p>Hello, World!</p></div>"; document.getElementById("myDiv").innerHTML = html; ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值