【JavaScript】添加DOM节点

【JavaScript】添加DOM节点
原创刘甜- 最后发布于2019-03-24 19:59:39 阅读数 310 收藏
展开
HTML DOM树

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

查找节点

通过 id 查找 HTML 元素
var x=document.getElementById("dv");
1
通过标签名查找 HTML 元素
var y=document.getElementsByTagName("p")[i];
1
添加节点

1. 创建节点

1>元素节点：var node =document.createElement(“标签名”);

2>文本节点：

Var textNode=document.createTextNode("文本内容");
节点.innerHtML="文本内容";//可以识别html
节点.innerText="文本内容";//非标准，有些浏览器无法识别
1
2
3
3>属性节点：

节点.setAttribute(“属性名”,“属性值”);

1.这是标准的方法，符合xml规范，可以添加任意的属性；
2.节点.属性名=“属性值”，例如aNode.jk=“jk”;//部分浏览器时可以使用

2. 追加节点

a. 追加到尾部：父节点.appendChild(子节点);

b. 插入到中间（插入到某一个元素的前面)：父节点.insertBefore(新元素，旧元素);

demo

<head>
<script type="text/javascript">
   var J = function(id){
       return document.getElementById(id);
   };
   onload = function(){
       var ul=J("ul");
       var li=J("li");
       //创建li标签
       var newLi=document.createElement("li");
       //添加文本内容
       newLi.innerHTML="新的测试数据";

       //插入
       ul.insertBefore(newLi,li);
   };
</script>
</head>
<body id="bd">
<ul id="ul">
   <li>测试数据111</li>
   <li id="li">测试数据222</li>
   <li>测试数据333</li>
</ul>
</body>
1

删除节点

a.父节点.removeChild(子节点) //一般不直接删除，而是隐藏节点

b.节点.style.display=“none” //隐藏节点
————————————————
版权声明：本文为CSDN博主「刘甜-」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lt_future/article/details/88757746

【JavaScript】添加DOM节点相关推荐

jQuery添加DOM节点常用的5种方法
一.内部插入(前插入.后插入): <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
vue 动态添加click_vue，在模块中动态添加dom节点，并监听
vue向数组中动态添加数据 vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action th ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
JavaScript 插入Dom节点
大家好,今天我们来分享JavaScript 插入Dom节点首先我们要知道, 不管我们对Dom节点进行什么样的操作,都必须先获取这个节点,假如说,这个dom节点是空的,我们可以通过innerHTML就 ...
【JavaScript】DOM节点-创建、插入、删除、替换、克隆节点
文章目录 DOM节点创建节点 1. 创建元素节点 2. 创建文本节点插入节点 1. appendChild() 2. insertBefore() 删除节点 1. removeChilde() 2 ...
javascript 分时函数分批次添加DOM节点 timeChunk
创建1000个webqq的qq好友列表, 一个好友用一个节点来表示 * timeChunk var timeChunk = function(a, fn, sz, done) {var obj, t, ...
【Javascript】 DOM节点
HTML文档中一切都是节点! 整个文档是文档节点: 注释是注释节点: 每一个HTML元素都是一个元素节点: 元素内的文本内容是文本节点: 连元素的每一个属性都是一个属性节点. 看到这些是不是感觉很熟悉 ...
Javascript元编程创建DOM节点
在使用javascript创建DOM节点的过程中,难免要使用document.createElement.setAttribute. document.createTextNode等冗长.还有浏览器兼 ...
java dom 获得子元素_在JavaScript中删除DOM节点的所有子元素
我将如何删除JavaScript中DOM节点的所有子元素? 说我有以下(丑陋的)HTML: hello world 我抓住了我想要的节点,如下所示: var myNode = document.get ...

【JavaScript】添加DOM节点

【JavaScript】添加DOM节点相关推荐

最新文章

热门文章