JavaScript实现js添加dom元素（以下拉框为例子）

最新推荐文章于 2024-06-25 19:24:28 发布

冷傲幽神

最新推荐文章于 2024-06-25 19:24:28 发布

阅读量785

点赞数

本文链接：https://blog.csdn.net/WAITFORYOU_/article/details/106562468

版权

效果图：

也可以根据自己的需要更改下拉框的值
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body> 
		 
		<input type="button" id="" value="添加" onclick="add()" />
		<div id="sel">
			
		</div>
		<script type="text/javascript">
			function add(){
				var select=document.createElement("select");
				var op1=document.createElement("option");
				op1.value="1801";
				op1.innerText="移动互联";
				select.appendChild(op1);
				document.getElementById("sel").appendChild(select)
			}
		</script>

		
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

冷傲幽神

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

js浏览器操作DOM之插入DOM

weixin_34205826的博客

08-16

643

当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替...

js 添加、删除DOM元素

qq_36158551的博客

03-09

2055

该方法添加的元素位于父元素的末尾，使用方法：parentNode.appenChild(NewNode) // parentNode是需要添加元素的容器，NewNode是新添加的元素${${

参与评论您还未登录，请先登录后发表或查看评论

原生js中如何添加dom元素

热门推荐

zl13015214442的博客

05-22

3万+

1. appendChild() 概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。使用方式：fatherdom.appendChild( insertdom )。兼容性：所有浏览器都支持此方法。 2. insertBefore() 概念：把要插入的节点添加到指定父级里面的指定节点之前。使用方式：fatherdom.insertBefore( insertdom，chose...

JavaScript 插入Dom节点

weixin_47556601的博客

02-15

4396

大家好，今天我们来分享JavaScript 插入Dom节点首先我们要知道，不管我们对Dom节点进行什么样的操作，都必须先获取这个节点，假如说，这个dom节点是空的，我们可以通过innerHTML就可以增加一个元素，假如这个dom节点不存在，那这样做就不行了，否则会造成覆盖（就是会将原先的数据改掉）写源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

原生JavaScript来实现对dom元素class的操作方法(推荐)

10-19

总而言之，通过学习如何使用原生JavaScript实现对DOM元素class的操作，开发者可以更灵活地控制网页的样式表现，同时减少对jQuery等库的依赖，有助于提高网页性能和减少加载时间。这种方法是前端开发中的一个重要技能...

用JavaScript获取DOM元素位置和尺寸大小的方法

10-27

在JavaScript中，DOM元素的位置和尺寸大小是网页动态交互中不可或缺的部分。DOM（Document Object Model）是HTML和XML文档的结构化表示，它允许我们通过编程方式操作文档的各个元素。本文将深入探讨如何利用...

JavaScript实现获取dom中class的方法

12-09

本文将深入讲解如何使用JavaScript实现获取DOM元素中class的方法。首先，我们来分析提供的代码实例。在示例中，定义了一个名为`getClass`的函数，它接受两个参数：`node`代表要查询的DOM元素，`classname`是要找的...

核心原声JavaScript添加DOM元素

zhangqling的博客

09-28

1073

1、document.createElement();用来添加元素，括号内属性为要添加元素标签名。 2、appendChild(子节点);把一个元素插到父级上去，默认插到最后。 3、insertBefore(子节点 ,位置);和appendChild()用法类似，但是可以选择位置。 <!DOCTYPE html> <html lang="en"> <head...

js DOM

weixin_30438813的博客

06-18

159

DOM 是 Document Object Model（文档对象模型）的缩写。（BOM 浏览器对象模型）；任意的文档都可以绘制成树状结构 docunment就是一个对象，这个对象指代的是这个文档 document对象底下有一些方法，这些方法可以获取到某个或者某一组元素节点　　　　1.document.getElementById('id')　　通过元素的id属性，获取到这个元素（...

Javascript：增加DOM节点

最新发布

听海边涛声

06-25

388

Javascript：增加DOM节点

JS之DOM增添元素节点

m0_56174842的博客

01-29

329

JS之DOM

总结js常用的dom操作（js的dom操作API）

Time_Flies_lei的博客

04-30

444

前言很多同学用惯了jquery操作dom，让他们用js操作的时候，常常力不从心，本文总结了常用的js的dom操作方法，供大家翻阅！其实说起js操作dom，我很久很久之前有篇文章，jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法，但是不是很系统。不能说是API，今天来系统总结一下！节点查找API document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个； document.getElementsByClassNa

带你彻底学会JS DOM技术之创建，插入元素

大河之犬的博客

10-06

5044

所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”

JavaScript——DOM如何获取、添加元素

qq_45762293的博客

11-24

653

JavaScript—DOM如何获取、添加元素 DOM中有很多可以获取到页面元素的方法，这些方法都可以获取到页面元素，从而对元素进行操作，也可以添加、删除、修改元素。页面上的每一个元素，其实就是一个节点，而DOM上每一个节点都是唯一的。旧的获取方法 1、拿到页面所有的锚点 document.anchors； 2、拿到所有元素 document.body； 3、拿到所有的表单 documen...

【JS】原生JS的DOM操作之插入元素

mooonyuan的博客

03-13

2万+

插入元素主要是：在已有元素前插入元素和在已有元素后插入元素在已有元素前插入元素 DOM提供了insertBefore()方法，这个方法将一个新元素插入到一个现有的元素中需要满足三个条件： 1. 新元素：你想插入的元素（newElement） 2. 目标元素：你想把这个新元素插入到那个元素（targetElement）之前 3. 父元素：目标元素的父元素（pare...

Js 添加删除HTML DOM 元素（节点）

zeron_oo的专栏

03-03

7888

添加: 这是一个段落这是另一个段落 var para=document.createElement("p"); var node=document.createTextNode("这是新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(pa

JavaScript动态添加DOM元素总结

影の聚宝盆

04-11

1731

这两天开始写古代地图的GIS网站，说白了就是用古代地图的内容效仿山寨一下谷歌地图。 JS这东西很久没写了，有些概念也很模糊，导致完成分块拖动加载的功能就花了好多时间。主要问题是出在拖动时对元素内容的动态修改上，总结下。通过JS脚本动态修改DOM元素内容通常有两种方法： 1. 通过DOM标准接口创建元素 var newNode = document.creat

jsDOM元素创建：

痕迹

04-23

1294

DOM元素创建： 1，var oE = document.createElement(); 在元素对象中创建一个元素节点，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。 insertBefore() 方法在节点的子节点列表任意位置插入新的节点。 2，var att =