JavaScript学习（十九）—createElement方法、appendChild方法、insertBefore方法、insertAfter()方法

最新推荐文章于 2024-07-21 09:19:08 发布
最新推荐文章于 2024-07-21 09:19:08 发布
阅读量811 收藏 2
点赞数
分类专栏： 【JavaScript】 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46374969/article/details/115445283
版权
本文主要介绍了JavaScript中的DOM操作，包括createElement方法用于创建元素节点，appendChild方法和insertBefore方法进行元素的添加，insertAfter()方法用于节点间插入，以及removeChild方法删除节点，cloneNode方法复制节点，replaceChild方法替换节点。这些方法是JavaScript操作网页动态效果的重要手段。
摘要由CSDN通过智能技术生成

JavaScript学习（十九）—createElement方法、appendChild方法、insertBefore方法、insertAfter()方法…

一、write方法
1、作用：将信息输出到页面中
2、格式：document.write(要输出的信息)；
3、注意：能够解析标签，但是不支持转义字符

二、createElement方法
1、作用：创建元素节点
2、格式：document.createElement(“标签名称”);
3、返回值：创建好的元素节点

<body>
    <script>
        //创建一个节点
        var div <
了解本专栏 订阅专栏 解锁全文 超级会员免费看
王同学要努力
关注
专栏目录
订阅专栏
jQuery和JavaScript节点插入元素的方法对比
11-28
使用`insertAfter()`和`insertBefore()`，可以将元素插入到已存在的元素之前或之后，这两个方法同样具有破坏性，会删除原始元素的位置内容。 接下来，我们看JavaScript原生方法： 1. `appendChild()`：这个方法...
jquery和javascript的区别(常用方法比较)
10-27
jquery 就对javascript的一个扩展，封装，就是让javascript更好用，更简单，为了说明区别，下面与大家分享下JavaScript 与JQuery 常用方法比较
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
10-21
主要介绍了jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
appendchild 啥意思 Javascript
最新发布
Jenom的博客
07-21 222
在这个例子中，`document.createElement('div')` 创建了一个新的 `<div>` 元素，`document.getElementById('parent')` 获取了ID为 `parent` 的元素，然后 `appendChild(newElement)` 将新创建的 `<div>` 元素添加到这个父元素中。通常，这个方法被用来将一个元素（如一个新创建的 `<div>` 或 `<span>` 元素）添加到HTML文档中的一个已存在的父元素中。// 将整个文档片段添加到父元素中。
【JS--DOM-节点操作2】--createElement()、appendChild()、insertBefore()、自定义的insertAfter()
~~
05-21 6324
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。 appendChild() 方法在节点的子节点列表末添加新的子节点。 insertBefore() 方法在节点的子节点列表任意位置插入新的节点 -------------------------------------------------
JavaScript之insertBefore()和自定义insertAfter()的用法。
weixin_33895516的博客
08-03 345
在JS图片库的第五版开发完后http://www.cnblogs.com/GreenLeaves/p/5691797.html#js_Five_Version我们发现一个问题,就是假设在图片列表之后还有其他的元素,这个时候貌似就没有办法了,我们的真实想法是,让新创建的元素紧更在图片列表的后面,而不管这个列表出现在文档的那个地方.下面我们就来介绍两个方法来帮助解决这个问题。 1、insertBef...
js中createElement的使用
乘风破浪
02-21 9613
//创建form var _form=document.createElement_x('form'); _form.setAttribute('name','myform'); _form.setAttribute('action',''); _form.setAttribute('method','post'); //创建表 var _table=document.createEl
jquery的insertBefore(),insertAfter(),after(),before()
black-heart的专栏
06-19 1105
insertBefore():a.insertBefore(b) 　　　　　　　a在前，b在后, 　　　　　　　a：是一个选择器，b:也是一个选择器 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>jqu</title> &...
JavaScript之appendChild、insertBefore和insertAfter使用说明
12-01
`appendChild`、`insertBefore`以及非标准的`insertAfter`方法都是用于管理DOM树中节点关系的重要方法。下面我们将详细探讨这三个方法的功能、用法及实际应用。 1. `appendChild(newChild: Node)`: 这个方法将`new...
JS实现添加,替换,删除节点元素的方法
11-22
在JavaScript中，我们可以使用`createElement`函数创建一个新的HTML元素，然后使用`appendChild`或`insertBefore`方法将其插入到DOM中。例如，以下代码片段展示了如何在`<p id="p1">Hello World</p>`元素之后添加一...
JavaScript基础：动态操作元素（createElement、appendChild、insertBefore、removeChild等方法的应用）
Alley_Olive的专栏
07-07 2796
JavaScript基础：动态操作元素（方法：createElement、appendChild、insertBefore、removeChild，属性：firstChild、lastChild、childNodes）
通过insertBefore实现insertAfter
我爱骑呆马的专栏
06-04 1413
function insertAfter(newElement,targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); }else { parent.insertBefore(newEl
createElement appendChild
weitao_11的博客
08-27 466
js来实现div等东西的添加，之前为了能在js文件中就建立一个自制的 alert 于是学习了一下在实现生成要用到createElement 和 appendChild貌似还有其他的函数会用到但最基本的已经够用了， 使用的规则基本如下 新建一个div var alert_background = document.createElement("div"); 设置div的属性 alert_ba
javascript当中createElement的用法
mark_to_win的专栏
03-22 924
例 1.2（CreateP&InputIEFF.html）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><style type="text/css">.test { background:#0000FF;}</style>&...
createElement的用法
如果相遇，那么你好哦~
11-09 5253
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
js之appendChild、insertBefore和insertAfter
野草的博客
01-09 1963
appendChild：插入一个子节点 insertBefore：在指定元素之前插入一个子节点 insertAfter：在指定元素后插入一个子节点
html dom createelement,HTML DOM对象之createElement（）方法(示例代码)
weixin_36488954的博客
06-16 217
今天在学习DOM节点操作时，发现了创建DOM节点的createElement()方法的一个有意思的现象。代码如下：var box=document.getElementById("box");//假设网页中已经有个ID为box的元素；var bbb=document.getElementById("bbb");//假设网页中已经有个ID为box的元素;var aaa=document.create...
jQuery与JavaScript：常用方法对比与简化
创建新的DOM元素并将其添加到文档中，JavaScript使用`createElement`和`appendChild`，如`var para = document.createElement('p'); document.body.appendChild(para)`。而jQuery的API更加直观，如`$('<p></p>')....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王同学要努力

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值