js追加子元素

最新推荐文章于 2023-03-27 18:11:25 发布
最新推荐文章于 2023-03-27 18:11:25 发布
阅读量2.2w 收藏 3
点赞数 2
分类专栏： Javascript

<html>  
<head>  
<title>js</title>  
<script type="text/javascript">  
    window.οnlοad=function(){  
        var div=document.getElementById("divid1"); 
 
        var span=document.createElement("span");  
        span.id="spanid";  
        span.style.color="blue";  
        span.innerHTML=" i am append span !"  
        //div.appendChild(span);  

// .parentNode 父节点
div.parentNode.insertBefore(span,div);

    }  
</script>  
</head>  
<body>  


 <div id="divid" style="color: red; font-size:80;">i am div !
  <div id="divid1" style="color: red; font-size:80;">i am div !</div>
  </div>  
</body>  
</html> 


在页面加载完毕后，向div元素追加span子元素。 

Html代码   收藏代码
  1. <html>  
  2. <head>  
  3. <title>js</title>  
  4. <script type="text/javascript">  
  5.     window.onload=function(){  
  6.         var div=document.getElementById("divid");  
  7.         var span=document.createElement("span");  
  8.         span.id="spanid";  
  9.         span.style.color="blue";  
  10.         span.innerHTML=" i am append span !"  
  11.         div.appendChild(span);  
  12.     }  
  13. </script>  
  14. </head>  
  15. <body>  
  16.     <div id="divid" style="color: red; font-size:80;">i am div !</div>  
  17. </body>  
  18. </html>  

js创建与追加元素

用javascript创建元素 ：

1 var NewNode = document.creatElement('div');

结合appendChild与insertBefore插入到DOM树中

insertBefore：语法：

var insertedNode = parentNode.insertBefore(newNode,referenceNode)

例子

复制代码 
<div>
    <button onclick="creatEle" id="btn">点击创建新btn</button>
<div>

<script>
//创建一个新btn
var newBtn = document.creatElement('button');
newBtn.value="value";
newBtn.style.width = 50px;
newBtn.style.height = 50px;
//追加新创建的btn
var oldBtn = document.getElementById('btn');
var parentNode = oldBtn.parentNode;
//parentNode.insertBefore(newBtn,oldBtn);//在原有btn的前面插入新创建的btn；
parentNode.insertBefore(newBtn,oldBtn.nextSiblings)//将在原有btn的后面插入新创建的btn，！！！原因是没有insetAfter！！所以用nextSiblings
</script>
复制代码

appendChild 语法

var aChild = element.appendChild(aChild);

例子

复制代码 
//html结构见上
var newBtn = document.creatElement('button');
var oldBtn = document.getElementById('btn');
var parentNode = oldBtn.parentNode;
parentNode.appendChild(newBtn);


//MDN 例子
var p = document.createElement("p");
document.body.appendChild(p);
复制代码

总结：两者都是在父元素内追加子元素，insertBefore可以通过referenceNode.siblings向后插入子元素。


shueiyuan1983
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript刷新页面的几种方法总结
12-09
1，reload 方法 该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet]) 参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”) 2，replace 方法 方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。 语法： location.replace(URL) 通常使用： location.reload() 或者是 history.go(
backbone-kinview:带内置生命周期管理功能的ribs.js视图用于子视图
04-30
KinView KinView是视图，它提供了一个简单的api来管理子视图并将其自动追加到父$el 。 它还允许子元素具有附加到其上的状态，并在父元素被remove() ed时删除子元素。 安装 KinView已被设计为require通过“d ，目前仅在该环境支持。 安装： npm install backbone-kinview --save 代码 CI KinView持续集成由Wercker处理： 测验 KinView自豪地保持100％的测试覆盖率。 要手动运行测试，请使用--dev进行安装（如上所述）并运行： gulp testc 您可以选择附加--html参数来生成HTML代码覆盖率报告 问题 可以在打开问题，欢迎提出要求！ 用法 入门 首先创建一个新的KinView： var KinView = require ( 'backbone-kinview' ) var k
jQuery动态创建元素以及追加节点的实现方法
01-19
我们知道js中有三种动态创建元素的方法，jQuery中也可以动态的创建元素 例如： var str = $(<a href='//www.jb51.net'>软件开发网</a>); $(ul).append(str); //将动态创建的str元素追加到ul下面 追加节点 在js当中追加节点的方法是appendChild(节点元素)和insertBefor(节点元素，位置)，在jQuery中是 append 追加在父元素的最后一个子节点后面 prepend插入到父元素的第一个子节点前面 after在元素后面追加，同级 befor在元素的前面追加，同级 下面的代码可以很好的演示追加
JS中appendChild追加子节点无效的解决方法
10-17
主要给大家介绍了关于JS中appendChild追加子节点无效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习
js追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）...
weixin_33979203的博客
05-05 6320
[html]view plaincopy<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>js中常用追加元素的几种方法</title><linkrel="s...
js原生往父元素中添加子元素
weixin_56704277的博客
03-11 9514
1.通过createElement创建元素 var lis=document.createElement('li') 2.给创建的元素添加Html值 lis.innerHTML=` <li class="setItem" id="setItem"> <input class="ipt" type="text" ' value="1"> <div class="textColor icon
js创建与追加元素
weixin_30787531的博客
08-07 716
用javascript创建元素 ： 1 var NewNode = document.creatElement('div'); 结合appendChild与insertBefore插入到DOM树中 insertBefore：语法： var insertedNode = parentNode.insertBefore(newNode,referenceNode) 例子 ...
JavaScript DOM appendChild添加子元素
编程界明世隐的博客
12-16 7333
目录 1.在末尾添加元素： 2.移动元素至末尾或至另一个元素的末尾： 1.在末尾添加元素，实例： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> </head> <body> <div id="box"
js 下获取子元素的方法
weixin_30563917的博客
05-06 3942
笔记核心： firstElementChild只会获取元素节点对象，从名称就可以看出来，firstChild则可以获取文本节点对象（当然也可以获取元素节点对象），比如空格和换行都被当做文本节点。 js不同于jQuery，在获取DOM时，有很多不方便的地方，哎，没办法，原始的东东，虽然万能，但却不方便。 咱今天在使用原生js的时候，就遇见一个坑------》firstChild，具...
js创建子元素：innerHTML与document.createElement()
wsj2311161832的博客
01-24 3634
建议（创建少量元素时）： 1.当父元素里没有其他元素，或者只添加少量行内元素或行内块元素时用innerHTML。 原因：此时不会破坏父元素内的整体布局，并且只添加如a标签、span标签这些行内元素时，用innerHTML更加快捷。 2.当父元素里已经布局了其他元素，并且添加有样式块元素时用document.createElement()。 原因：用document.createElement()创建元素插入顺序，可以通过elemen...
js获取子元素
热门推荐
时光的博客
07-17 3万+
在原生js里获取子元素childNodes ，但是在一些浏览器会把空格当成子元素 html html： &lt;div class="box"&gt; &lt;div&gt;2&lt;/div&gt; &lt;div&gt;1&lt;/div&gt; &lt;/div&gt; Js： var $ = function(o){ //获取元素函数 return doc
JS之DOM（3）（节点操作）
m0_63139310的博客
03-05 434
节点操作 之前学习到的利用DOM提供的获取元素的方法（如document.getElementById()等）逻辑性不强且较为繁琐。所以现在学习利用节点层次关系来获取元素，逻辑性强但是兼容性较差。 节点概述 网页中所有的内容都是节点（标签、属性、文本、注释等），在DOM中用node表示。 DOM树中所有的节点都可以通过JS进行访问，所有HTML元素（节点）都可以被修改也可以被创建或删除。 节点的基本属性 节点的基本属性包含了nodeType（节点类型）、nodeName（节点名称）、node..
JavaScript 添加新元素
大家好，我是 ed.
03-03 1290
JavaScript 添加新元素 添加元素 创建元素 　　使用 JS 可以为一个已有的元素添加一个新的子元素。 　　第一步：创建空元素。 　　　　-var elem = document.createElement("标签名"); 　　　　- 创建元素后，可以像使用 DOM 树中的任意元素一样，为此元素添加属性或内容。 　　　　　　-elem.id = "xxx"; 　　　...
JavaScript基础：动态操作元素（createElement、appendChild、insertBefore、removeChild等方法的应用）
Alley_Olive的专栏
07-07 1691
JavaScript基础：动态操作元素（方法：createElement、appendChild、insertBefore、removeChild，属性：firstChild、lastChild、childNodes）
js基础笔记学习305添加子元素
qq_41632427的博客
11-16 258
前端
JavaScript之获取父级元素和子集元素
fusheng_lee的博客
03-27 6894
获取父级元素和子集元素
JavaScript-笔记12
wsssq_的博客
01-16 377
DOM查询
JS中添加元素的方法
honghaiash的博客
07-30 6313
append():前面是被插入的对象。最后面增加子元素，父子级关系。 appendto():后面是被插入对象。最后面增加子元素，父子级关系。 prepend():前面是被插入对象。最前面增加子元素，父子级关系。 prependTo():后面是插入对象。最前面增加子元素，父子级关系。 before():前面是插入对象。之前增加元素，同级关系。 after():前面是插入对象。之后加入元素，同级关系。...
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
逝者如风
07-02 9486
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js中常用追加元素的几种方法&lt;/title&gt; &lt;link rel="stylesheet" href="css/rest.css" /&g
JQuery中append追加的子元素怎么删除
最新发布
05-22
在 jQuery 中，可以使用 `remove()` 方法从 DOM 中删除元素。如果要删除追加的子元素，需要先选中该子元素，然后调用 `remove()` 方法。例如，假设我们有一个 `div` 元素，其中包含一个 `p` 元素作为子元素，可以使用以下代码删除该 `p` 元素： ```javascript $('div').find('p').remove(); ``` 这里的 `$('div')` 选中了包含子元素的 `div` 元素，然后使用 `find()` 方法选中了该 `div` 元素下的 `p` 元素，并使用 `remove()` 方法将其从 DOM 中删除。如果你知道要删除的子元素的 ID 或类名，也可以直接使用其选择器来选中并删除该元素。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值