JavaScript中利用createElement添加元素

最新推荐文章于 2024-05-28 00:30:00 发布
最新推荐文章于 2024-05-28 00:30:00 发布
阅读量1.3k 收藏
点赞数
分类专栏： js基础教程 文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/plannothing/article/details/107926225
版权
这篇博客介绍了如何在JavaScript中使用createElement方法动态创建表格元素，并展示了如何通过删除超链接的点击事件来移除对应的表格行。文章详细讲解了获取元素、删除元素的过程，涉及到parentNode、removeChild等DOM操作，并提到了confirm()函数用于确认删除操作，最后提到如何阻止超链接的默认跳转行为。
摘要由CSDN通过智能技术生成 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">

/*
 * 点击一个删除，删除一个员工的超链接
 */

//获取所有的超链接

/*
 * 删除我们tr的点击响应函数
 */
function delA(){
			
			//点击超链接以后需要删除超链接所在的那行
			//这里我们点击那个超链接this就是谁
			
			//获取当前tr
			
			var tr = this.parentNode.parentNode;
			
			//获取要删除员工的名字

// var name = tr.getElementsByTagName(“td”)[0].innerHTML

			var name = tr.children[0].innerHTML
			
			//删除tr，获取它的父节点，再对父节点进行removeChild
			
			//删除之间弹出一个提示框

// alert(“确认删除吗？”)

		/*
		 * confirm()用于弹出一个带有确认和取消按钮的提示框
		 *  需要一个字符串作为参数，该字符串将会作为提示文字弹出
		 * 如果用户点击确认则会返回true，如果点击取消则返回false
		 */
		
		//如果用户点击确认
		
		
		if(confirm(
最低0.47元/天 解锁文章
plannothing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
createElement() 创建元素 appendChild()添加元素
weixin_30591551的博客
09-05 536
Javascript window 对象的document.createElement() 方法、语法及其使用。 1、方法 创建一个新的html元素对象，并可返回一个Element 对象，新创建的Element 对象，具有指定的标签名。 2、语法 以下为引用内容： createElement(name) 3、使用 1、创建超链接 以下为引用内容： <html> &l...
JS中使用innerHTML和createElement方式动态创建元素
weixin_33743703的博客
06-18 2623
方式一：使用innerHTML拼接字符串方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
Javascript 创建新节点 document.createElement()
最新发布
大剑师兰特的GIS世界
05-28 1170
在JavaScript中，创建新节点是DOM操作的重要组成部分，它允许你动态地向文档中添加内容。以下是创建新节点的详细说明、示例代码、注意事项以及常见应用场景。
添加元素
weixin_40442639的博客
03-22 810
createElementById() 创建一个元素后，添加到父元素的中，用appendChilde添加到元素之中 var ul1 = document.getElementById(“ul1”); //创建的li 元素添加到父元素的最后 var newLi = document.createElement(“li”); newLi.innerText = “我是新建的li元素”; ul1.app...
create-element.js:创建HTML元素的简单方法
05-26
create-element.js 创建HTML元素的一种简单方法。 您不再需要像下面这样写。 const div = document . createElement ( 'div' ) ; div . id = 'divDemo' ; div . classList . add ( 'my-class' ) ; div . innerText = 'Hello, world' ; 安装 npm install create-element.js 提示：使用可以更轻松地使用前端库。 用法 ce . tagName ( param1 , param2 ) ; tagName ：元素HTML标记名称 ce . div ( ) ; ce . span ( ) ; ce . p ( ) ; String或Number类型参数：element.innerText的值 ce . p
javascript实现的动态添加表单元素input,button等(appendChild)
10-30
以下将详细介绍如何使用JavaScript动态添加表单元素，特别是`input`和`button`，以及如何利用`appendChild`方法。 首先，我们需要了解`document.createElement`函数。这个函数用于在内存中创建一个新的HTML元素。...
JavaScript HTML DOM元素 节点操作汇总
10-16
在上述示例中，新创建的`<p>`元素被添加到ID为`div1`的`<div>`元素内。 **删除节点** 删除节点使用`removeChild()`方法，需要先获取要删除的节点及其父节点，然后调用父节点的`removeChild()`方法。例如： ```...
利用javascript动态添加行(原创)
07-19
使用DOM方法如`createElement()`, `appendChild()` 和 `innerHTML`，我们可以创建新的元素并将其插入到现有元素中。 2. **创建新行**：在HTML表格中，我们通常使用`<tr>`元素表示行。在JavaScript中，首先需要创建...
javascript发表留言添加表情代码
05-23
在JavaScript开发中，实现“发表留言添加表情代码”的功能是一项常见的需求，特别是在构建社交媒体或论坛类网站时。这个功能允许用户在发表评论或留言时，选择并插入预定义的表情符号，增强文字表达的情感色彩。本篇...
Javascript小技巧之生成html元素
10-25
在JavaScript中，生成HTML元素是动态构建网页内容的常用技术，尤其在响应用户交互或处理数据时。本文将深入探讨两种生成HTML元素的方法：一种是使用DOM操作，另一种是利用`document.write()`函数。 首先，我们来看...
JS：如何创建新元素并添加到页面中
TianXuab的博客
10-10 1388
通过JavaScript，我们可以根据用户的操作、数据的变化或其他条件来动态地生成新的元素，并将其插入到页面的特定位置。通过JavaScript，我们可以轻松地创建新的HTML元素并将其添加到页面中。通过设置元素的属性，我们可以改变元素的外观、行为和其他特性。创建新元素并设置其属性和内容后，我们需要将其添加到页面中的特定位置。除了设置元素的属性，我们还可以使用JavaScript来为新元素添加文本内容。要创建一个新的HTML元素，我们可以使用JavaScript的。这个方法接受一个参数，即要添加的元素。
js原生创建元素createElement,动态插入js
qq_37280949的博客
10-11 2416
创建元素 document.createElement() document.createElement() 一个参数元素标签名称或者包含属性的完整标签字符串 const div = document.createElement('div') div.id = 'test' // 设置元素id div.className = 'test' // 设置元素class // 等价如下 const div = document.createElement("<div id='test' class.
js添加元素的方式
weixin_68915174的博客
10-29 1万+
innerHTML可以输出标签以及内容，innerText只能输出内容不能输出标签。beforebegin：插在元素自身的前面。beforebegin：插在元素自身的前面。afterbegin：插在元素内部最前面。beforeend：插在元素内部最后面。afterbegin：插在元素内部最前面。beforeend：插在元素内部最后面。afterend：插在元素自身的后面。afterend：插在元素自身的后面。
【js】document.createElement创建添加属性
michiko98的博客
10-27 5050
createElement js
使用js动态创建元素createElement的使用
爬楼梯的前端小白的博客
01-24 1416
使用js动态创建元素createElement的使用
js添加多个子节点_JS创建DOM节点－使用document.createElement()创建子节点或同级节点...
weixin_39520210的博客
12-19 3194
在一个Web页面中，需要弹出一个提示信息显示给用户。基于这个需求，要使用document.createElement()创建一个DOM节点。创建完节点后，还要使用appendChild()或insertBefore()将创建的节点插入到DOM的指定位置。1. createElement(name)创建元素节点createElement()是Document对象中的方法，该方法会根据指定的元素名称n...
js使用createElement给table里添加tr、td
oleiwoaboluo的博客
09-21 5756
一、createElement的定义 createElement()方法通过指定名称创建一个元素 例如：document.createElement("tr") 创建一个tr的元素节点 二、语法 document.createElement(nodename) nodename 类型为string类型 为创建元素的名称。 三、例如：给table里新增单元格 1、找到table标签 var tableobj=document.getElementById("table"); 2、创建一个..
笔记——document.createElement创建添加属性
热门推荐
shiki0083的笔记
05-16 3万+
动态添加div中，需要进行添加id，class，style等属性做下记录[javascript] view plain copyvar div = document.createElement('div');  div.id = 'mask_div1';  div.className = 'mask';  div.appendChild(document.createTextNode("test"...
【随笔记录】document.createElement创建添加属性
文学超的博客
07-15 2万+
动态添加div中，需要进行添加id，class，style等属性 做下记录 var div = document.createElement('div'); div.id = 'mask_div1'; div.className = 'mask'; div.appendChild(document.createTextNode("test")); div.style.pos
利用javascript 添加1万个div 效率优化
05-26
在添加大量DOM元素时，优化代码的关键是减少DOM操作的次数。以下是一些可以优化代码的方法： 1. 使用文档片段：创建一个文档片段并在其中添加所有的div元素，最后再将文档片段一次性添加到DOM树中。这样可以减少DOM操作的次数。 ```javascript const fragment = document.createDocumentFragment(); for (let i = 0; i < 10000; i++) { const div = document.createElement('div'); fragment.appendChild(div); } document.body.appendChild(fragment); ``` 2. 使用innerHTML：将所有的div元素拼接成一个HTML字符串，然后一次性添加到DOM树中。这样可以减少DOM操作的次数。 ```javascript let html = ''; for (let i = 0; i < 10000; i++) { html += '<div></div>'; } document.body.innerHTML = html; ``` 3. 使用CSS：将所有的div元素放在同一个CSS类中，然后使用JavaScript一次性添加这个CSS类到DOM树中。这样可以减少DOM操作的次数。 ```javascript const style = document.createElement('style'); style.textContent = '.my-class { width: 100px; height: 100px; }'; document.head.appendChild(style); const divs = []; for (let i = 0; i < 10000; i++) { const div = document.createElement('div'); div.className = 'my-class'; divs.push(div); } document.body.append(...divs); ``` 4. 使用requestAnimationFrame：将添加div元素的操作放在requestAnimationFrame中，这样可以让浏览器在下一帧渲染之前处理这些操作。这样可以减少DOM操作对性能的影响。 ```javascript let count = 0; function addDivs() { const div = document.createElement('div'); document.body.appendChild(div); count++; if (count < 10000) { requestAnimationFrame(addDivs); } } requestAnimationFrame(addDivs); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值