js添加元素、节点

最新推荐文章于 2024-04-25 00:00:00 发布
最新推荐文章于 2024-04-25 00:00:00 发布
阅读量2.4k 收藏 2
点赞数 1
分类专栏： web前端(html css js) 文章标签： js dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47659279/article/details/112609086
版权

1.使用document.creatElement(元素类型)创建节点；
例如创建一个div，就使用document.createElement(“div”)，该方法返回创建好的DOM对象。

2.使用父元素.append()方法将创建好的节点作为子元素添加进某个元素下；

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="addElement()">添加结点</button>
    <div style="width: 300px;background-color: orange;">
        点击按钮往这个div中添加元素
    </div>
    
    <script>
        function addElement(){
            //创建节点
            let newDiv = document.createElement("div");
            newDiv.innerHTML = "newDiv";

            //将节点添加到div下
            document.getElementsByTagName("div")[0].append(newDiv);
        }
    </script>
</body>
</html>
程序猿想成程序狮
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript的节点操作 —— 增加节点
平凡的平淡的博客
04-28 1万+
目录 JavaScript中的节点操作分为：增、删、改、查（获取），四大类型。 我们直接利用案例来学习： HTML布局代码： JavaScript代码实现： 第一步：获取所有要用到的元素对象（可以利用id、class、name、标签获取）。 第二步：事件操作（单击事件、双击事件、鼠标移入事件、移出事件等等） 第三步：在单击事件中，所要做的操作。 在单击事件里面我们做JavaScript的核心代码 —— 添加节点。 最后出现的效果就是这样的效果： JavaScript中的...
JS中创建节点和插入节点
weixin_45962741的博客
05-15 2257
1、JS中添加段落的三种方式 第一种方式：通过createTextNode 来添加段落文本 function addP() { // 第一种方式 var p = document.createElement("p"); var txt = document.createTextNode("将来的你会感谢现在奋斗的自己"); p.appendChild(txt); document.getElementById("container").appendChild
JS 添加数组元素（ 4种方法 ）
最新发布
大剑师兰特的GIS世界
04-25 5048
ush() 和 unshift() 方法会直接修改原数组。 splice() 方法同样会直接修改原数组，但它还可以用来同时删除和插入元素。 concat()方法不会改变原数组，而是返回一个新的数组。
js在末尾添加节点
10-15 541
在末尾添加节点 001 002 function addNode(){ //获得ul标签 var ul=document.getElementById('ul'); //创建li标签 var li=document.createElement('li'); //创建li文本 var liText=document.createTextNode('00
带你彻底学会JS DOM技术之创建，插入元素
大河之犬的博客
10-06 4801
所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”
js怎样添加、移除、移动、复制、创建和查找节点
IT1125275074的博客
03-10 590
（1）创建新节点 var para=document.createElement("p"); //创建新的 <p> 元素 var node=document.createTextNode("这是新段落。"); //创建了一个文本节点 para.appendChild(node); //向 <p> 元素追加这个文本节点 var element...
JS简单添加元素新节点的方法示例
10-18
本示例主要讲解了如何使用JavaScript来创建、添加和克隆页面元素节点，这些都是前端开发中常见的操作。下面将详细解析这些方法： 首先，我们获取页面上的某个特定元素。在这个例子中，我们通过`getElementById`方法...
JS实现添加,替换,删除节点元素的方法
10-22
主要介绍了JS实现添加,替换,删除节点元素的方法,实例分析了javascript针对节点元素的替换、删除及常用的几种添加技巧,需要的朋友可以参考下
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
javascript删除一个html元素节点的方法
10-25
在JavaScript中，删除HTML元素节点是一项常见的操作，特别是在动态构建页面或者进行DOM操作时。本文将详细介绍如何使用原生JavaScript来删除一个特定的HTML元素节点。 首先，我们需要了解DOM（Document Object ...
javascript div元素后追加节点
weixin_30339969的博客
07-22 555
例子解释： 这段代码创建新的 <p> 元素： var para=document.createElement("p"); 如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点： var node=document.createTextNode("这是新段落。"); 然后您必须向 <p> 元素追加这个文本节点：...
Jquery和Js追加节点的方法
weixin_56263402的博客
05-15 954
jQuery　追加节点四队八种 <script src="js/jquery-1.9.1.min.js"></script> <script> $(function(){ //append(),在父级最后追加一个子元素 $(".append").click(function(){ $("#wrap").append("<p class='three'>我是子元素append&l...
原生js添加节点appendChild、insertBefore
热门推荐
LLL_liuhui的博客
04-12 2万+
1、createElement() 创建元素节点 var element=document.createElement(‘元素名’);2、crateTextNode() 创建文本节点 var txt=document.crateTextNode(‘文本内容’);3、createAttribute() 创建属性节点 var attr=document.createAttribute(‘属性名’)
JS中添加元素的方法
前端日月明
03-18 1万+
append():前面是被插入的对象。最后面增加子元素，父子级关系。 appendto():后面是被插入对象。最后面增加子元素，父子级关系。 prepend():前面是被插入对象。最前面增加子元素，父子级关系。 prependTo():后面是插入对象。最前面增加子元素，父子级关系。 before():前面是插入对象。之前增加元素，同级关系。 after():前面是插入对象。之后加入元素，同级关系...
js——添加或删除元素节点（append 和 innerHtml） 节点访问关系 节点属性
肖的博客
08-24 1万+
1、append原理： //添加 var para=document.createElement('p');//创建新的p标签 var node=document.createTextNode('这是一个段落');//创建一个文本节点 para.appendChild(node);//向p追加此文本节点 para.className=&amp;amp;amp;quot;lucky&amp;amp;amp;quot;;//向...
在一个div后面追加html,javascript div元素后追加节点
weixin_34761438的博客
05-31 1620
例子解释：这段代码创建新的 元素：var para=document.createElement("p");如需向 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：var node=document.createTextNode("这是新段落。");然后您必须向 元素追加这个文本节点：para.appendChild(node);最后您必须向一个已有的元素追加这个新元素。这...
js 在元素前后添加元素
肖明伟 的博客
08-12 4630
在元素前后添加创建的元素 话不多说，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sanai_1992</title> <style> .item{ width: 100px; height: 100px; background-color: linen; } .item2{ widt
JS创建一个元素节点, 并把该节点添加为文档中指定节点的子节点
weixin_33713350的博客
02-04 510
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text...
算法--路径总和
CodersCoder的博客
09-08 551
描述 给定一个二叉树和一个目标和，判断该树中是否存在根节点到叶子节点的路径，这条路径上所有节点值相加等于目标和。 说明: 叶子节点是指没有子节点的节点。 示例 分析 从根节点开始，使用递归，判断左节点或者右节点到叶子节点是否存在sum-root.val即可。 实现 class Solution { public boolean hasPathSum(TreeNode root, int sum) { if (root == null) { return fa
js添加元素节点的方法
09-10
在JavaScript中，可以使用以下几种方法来添加元素节点： 1. createElement()方法：使用该方法创建一个新的HTML元素节点。例如，可以使用以下代码创建一个新的段落元素节点： ```javascript var para = document.createElement("p"); ``` 2. createTextNode()方法：使用该方法创建文本节点。例如，可以使用以下代码创建一个新的文本节点： ```javascript var text = document.createTextNode("这是新的文本节点"); ``` 3. appendChild()方法：使用该方法将一个新的子节点添加到父节点中。例如，以下代码将新创建的段落元素节点添加到HTML文档的body元素节点中： ```javascript document.body.appendChild(para); ``` 4. insertBefore()方法：使用该方法将一个新的节点插入到父节点中某个指定节点的前面。例如，以下代码将新创建的段落元素节点插入到id为"div1"的元素节点的前面： ```javascript var div = document.getElementById("div1"); document.body.insertBefore(para, div); ``` 5. innerHTML属性：使用该属性可以将HTML代码作为字符串插入到指定节点中。例如，以下代码将一段HTML代码插入到id为"div1"的元素节点中： ```javascript document.getElementById("div1").innerHTML = "<p>这是一段HTML代码</p>"; ``` 通过上述方法，可以方便地使用JavaScript添加元素节点到HTML文档中的指定位置。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值