js创建新节点

最新推荐文章于 2024-05-28 00:30:00 发布
最新推荐文章于 2024-05-28 00:30:00 发布
阅读量280 收藏
点赞数 1
原文链接：https://my.oschina.net/u/3820340/blog/1806533
版权

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>创建节点及其属性</title>

</head>

<style>

#listShow>li ul{

display: none;

}

#listShow>li>a{

background:#ccc;

}

li{

list-style: none;

}

</style>

 

<body>

<div id="listS">

</div>

</body>

</html>

<script>

/*创建节点的js不能写在要创建节点位置的html前面，否则js就会失效*/

var element=document.getElementById('listS');

/*创建p标签*/

var createP=document.createElement('p');

var node=document.createTextNode('这是创建的p标签');

createP.appendChild(node);

element.appendChild(createP);

 

/*创建div标签*/

var createP1=document.createElement('div');

var node1=document.createTextNode('这是创建的div标签');

createP1.appendChild(node1);

element.appendChild(createP1);

 

/*创建a标签至li标签中*/

var createLi=document.createElement('li');

var createA=document.createElement('a');

createA.href='#';

createA.innerHTML='这是创建a标签';

createLi.appendChild(createA);

element.appendChild(createLi);

 

/*创建ul>li>a标签*/

var createUl=document.createElement('ul');

var createLi1=document.createElement('li');

var createLi2=document.createElement('li');

var createA1=document.createElement('a');

var createA2=document.createElement('a');

var nodeLi1=document.createTextNode('这是创建ul>li>a标签');

var nodeLi2=document.createTextNode('这是创建ul>li>a标签2');

createA1.href='#';

createA2.href='#';

createA1.appendChild(nodeLi1);

createA2.appendChild(nodeLi2);

createLi1.appendChild(createA1);

createLi2.appendChild(createA2);

createUl.appendChild(createLi1);

createUl.appendChild(createLi2);

element.appendChild(createUl);

 

/*创建input标签*/

var createInput=document.createElement('input');

createInput.value='';

createInput.setAttribute('type','text');

element.appendChild(createInput);

 

/*创建input标签中创建button按钮*/

var createInput1=document.createElement('input');

createInput1.setAttribute('value','按钮');

createInput1.setAttribute('type','button');

element.appendChild(createInput1);

 

/*创建button标签*/

var createButton=document.createElement('button');

var nodeButton=document.createTextNode('这是创建的Button标签');

createButton.appendChild(nodeButton);

element.appendChild(createButton);

 

/*创建img标签*/

var createImg=document.createElement('img');

createImg.src='https://gd3.alicdn.com/imgextra/i3/261786115/TB26JieadYA11Bjy0FhXXbIwVXa_!!261786115.jpg';

element.appendChild(createImg);

 

/*创建hr标签*/

var createHr=document.createElement('hr');

element.appendChild(createHr);

 

/*创建i标签*/

var createI=document.createElement('i');

var nodeI=document.createTextNode('这是创建的i标签');

createI.appendChild(nodeI);

element.appendChild(createI);

 

/*创建br标签*/

var createBr=document.createElement('br');

element.appendChild(createBr);

 

/*创建b标签*/

var createB=document.createElement('b');

var nodeB=document.createTextNode('这是创建的b标签');

createB.appendChild(nodeB);

element.appendChild(createB);

 

 

</script>

转载于:https://my.oschina.net/u/3820340/blog/1806533

chuojiu6941
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 节点相关内容介绍 创建、删除、复制节点
phoebemeng的博客
07-14 1104
js 节点相关内容 ，创建节点，添加节点，删除节点，复制节点，下拉菜单案例，简单发布留言删除留言案例
链表笔记（新建节点初始化、添加节点，尾插）
weixin_48102054的博客
09-08 943
链表笔记（新建节点初始化、添加节点，尾插）
JavaScript的节点操作 —— 增加节点
平凡的平淡的博客
04-28 1万+
目录 JavaScript中的节点操作分为：增、删、改、查（获取），四大类型。 我们直接利用案例来学习： HTML布局代码： JavaScript代码实现： 第一步：获取所有要用到的元素对象（可以利用id、class、name、标签获取）。 第二步：事件操作（单击事件、双击事件、鼠标移入事件、移出事件等等） 第三步：在单击事件中，所要做的操作。 在单击事件里面我们做JavaScript的核心代码 —— 添加节点。 最后出现的效果就是这样的效果： JavaScript中的...
JS中节点操作
libingjiedd的博客
03-17 1079
网页中的所有内容都是节点(标签,属性,文本,注释等),HTML DOM树中的所有节点都可通过JavaScript进行访问,所有html元素(节点)都可以被修改,也可以创建或删除。
Javascript 创建新节点 document.createElement()
最新发布
大剑师兰特的GIS世界
05-28 1119
在JavaScript中，创建新节点是DOM操作的重要组成部分，它允许你动态地向文档中添加内容。以下是创建新节点的详细说明、示例代码、注意事项以及常见应用场景。
节点的创建、添加、删除
m0_63679126的博客
03-13 2267
节点的创建、添加、删除
初学js 新节点的创建 删除 的步骤
10-28
在JavaScript中，创建和删除新节点是DOM操作的基础，这对于实现动态网页效果和交互至关重要。本文将详细介绍初学者如何实现这一过程，以及如何通过按钮控制节点的增删。 首先，我们需要理解HTML、CSS和JavaScript...
js创建元素（节点）示例
10-26
本文为大家介绍下使用js是如何创建元素（节点）的，感兴趣的朋友不要错过
jQuery简单创建节点的方法
10-21
本文将深入探讨jQuery中简单创建节点的方法，特别是如何利用`append`方法来添加元素，以及如何获取和操作节点。 首先，创建节点在jQuery中通常涉及创建元素、文本节点和属性节点。在提供的代码示例中，我们看到如何...
javascriptjs创建节点
12-05
JavaScript 创建节点详解 在 JavaScript 中，创建节点是指在文档中添加新元素或文本的过程。创建节点可以使用 createElement()、createTextNode() 和 cloneNode() 等方法。 createElement() 方法 createElement()...
Javascript动态创建 style 节点
12-11
有很多提供动态创建 style 节点的方法，但是大多数都仅限于外部的 css 文件。如何能使用程序生成的字符串动态创建 style 节点，我搞了2个小时。 静态外部 css 文件语法： @import url(style.css); 动态外部 css 文件...
JS动态创建html节点
08-11
1 var tt = document.getElementById("tr1"); for (var i = 0; i < 10; i++) { var FF = document.createElement(""); FF.innerText = 'td'+ i; tt.appendChild(FF); } ...............
JavaScript节点操作--创建节点、添加节点、删除节点、复制节点
Dreamer
11-22 1万+
节点操作 创建节点 document.createElement('tagName') document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也成为动态创建元素节点。 添加节点 node.appendChild(child) node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css中的after伪元素。 <body> <ul>
javascript中创建新节点的方法 ...
weixin_30399055的博客
12-25 362
一、 var newnode=document.createElement("i"); var newnodeText=document.createTextNode("javaScript"); newnode.appendChild(newnodeText); 二、 var newnode=document.createElement("i"...
创建节点的三种方法
littlebearGreat——宁静致远
08-01 4765
创建节点的三种方法： var txt1="Text."; // 以 HTML 创建新元素 var txt2=$("").text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素
js如何增加html节点,js怎么添加元素新节点？（图文详解）
weixin_39554891的博客
06-10 1977
js怎么添加元素新节点？本篇文章就给大家介绍在js中如何实现添加元素新节点的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。js要添加元素新节点，就必须先创建好新的元素节点，然后在把新的元素节点添加到html页面上。下面我们通过一个简单的代码示例来详细了解JavaScript要添加元素新节点的方法。js添加元素新节点#div{width: 200px;height: 150p...
JS创建、写入、读取本地文件（txt）
热门推荐
zhengyikuangge的博客
06-03 17万+
经测试，该方法在火狐、360浏览器不支持，在IE浏览器中支持。 创建本地文件 写入文件 读取文件 小案例创建本地文件var fso; try { fso=new ActiveXObject(&quot;Scripting.FileSystemObject&quot;); } catch (e) { alert(&quot;当前浏览器不支持&quot;); return; } var f1 = fso.createtextfile(
创建节点三种方式和性能比较
YIMT的博客
05-13 621
创建节点三种方式和性能比较 一、document.write() 注意如果页面已经加载完成，再调用会导致页面重绘 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <script> document.write('<h3&g
js对节点的操作，添加，删除，获得父节点，子节点，兄弟节点
jenyzhang的专栏
09-28 3万+
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个兄弟节点 var ps=s.previousSbiling; //得到s的上一个兄弟节点 var fc=s.firstChild; //获得s的第一个子节点 var lc=s.la
js创建子节点
05-31
使用JavaScript可以通过以下步骤创建子节点： 1. 创建一个新的HTML元素节点，可以使用 `document.createElement()` 方法，指定要创建的节点类型，例如： ```javascript var newElement = document.createElement...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值