删除和创建子对象 innerHTML增加节点

最新推荐文章于 2022-02-27 15:10:47 发布
最新推荐文章于 2022-02-27 15:10:47 发布
阅读量140 收藏
点赞数
文章标签： xhtml python
原文链接：https://my.oschina.net/u/2532163/blog/656807
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>删除节点，创建节点</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="布尔教育 http://www.itbool.com" />

</head>

    <body>

        <input type="button" value="删除一个节点"  οnclick="del();"/>

    <ul>

        <li>春</li>

        <li>夏</li>

        <li>秋</li>

        <li>冬</li>

    </ul>

    </body>

    <script>

    function del(){

        //删除标签

        var lis=document.getElementsByTagName('li');

        var last=lis[lis.length-1];

        //删除子对象

        last.parentNode.removeChild(last);

    }

    </script>

</html>

/*****************************************/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>创建节点</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="布尔教育 http://www.itbool.com" />

</head>

    <body>

        <h1>创建节点</h1>

        <input type="button" value="增加" οnclick="add()"/>

    <ul>

        <li>春</li>

        <li>夏</li>

        <li>秋</li>

    </ul>

    </body>

    <script>

    function add(){

        //创建节点

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

        var text=document.createTextNode('冬');

        li.appendChild(text);

        document.getElementsByTagName('ul')[0].appendChild(li);

    }

    </script>

</html>

/***********************************/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>暴力添加节点</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="布尔教育 http://www.itbool.com" />

</head>

    <body>

     <input type="button"value="添加春夏秋" οnclick="add3()" />

     <input type="button" value="添加冬" οnclick="add1()"/>

     <ul></ul>

    </body>

    <script>

    function add3(){

     var ul=document.getElementsByTagName('ul')[0];

     ul.innerHTML='<li>春</li><li>秋</li><li>夏</li>';

    }

    function add1 () {

     var ul=document.getElementsByTagName('ul')[0];

     ul.innerHTML+='<li>冬</li>'

    }

    </script>

</html>


转载于:https://my.oschina.net/u/2532163/blog/656807

weixin_34365635
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript第五章innerHTML/innerText/创建新节点元素添加内容第八课
Camel
03-19 699
测试结果： 步骤： 练习：按钮每点击一次，下面内容就增加一条 更多免费教学文章请关注这里 结果
添加标签和删除标签
dianmei3204的博客
05-24 110
邮箱中邮件，博客园中的博客都有类似的行为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht...
动态删除html标签属性,js入门动态添加删除标签
weixin_28848795的博客
06-04 442
js、动态添加删除运用下边几个标签实现动态创建标签，删除标签，大家要考虑的是内存里边发生的情况createElemen创建元素；appendChild追加元素；parentNode返回指定节点的父节点；removeChild删除指定的元素节点。第一步 HTML写法动态创建元素css设置属性#box{width：200px;height:200px;border:1px solid #ccc;}动态...
js新增子节点
Brewin的博客
02-13 1427
可作 添加按钮&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;插入子节点&lt;/title&gt; &lt;/head&gt; &amp
HTMLDOM 用innerHTML的方法删除和添加动态表格的行和列
weixin_46441425的博客
02-27 1272
javascript转换字符串为dom对象（字符串动态创建dom）.docx
01-19
这个函数接收一个字符串参数 `arg`，然后创建一个 `div` 元素，并将字符串插入到该元素中，然后返回该元素的子节点。这样，我们就完成了一个字符串到标准 DOM 的转换。 使用这个函数，我们可以轻松地将字符串转换为...
JavaScript实现动态添加、移除元素或属性的方法分析
01-19
删除元素的某个指定的子节点，并以 Node 对象返回被删除的节点，如果节点不存在则返回 null。 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 测试用例 <html> <head>
PHP DOM扩展库:SimpleXML 解析XML文档.md
最新发布
06-13
例如，你可以使用 `innerHTML` 属性获取或设置元素的内容，使用 `appendChild()` 方法向元素添加子节点。 4. **动态性**：由于 DOM 是编程接口，因此可以通过脚本（如 JavaScript）动态地创建、修改和删除文档的内容...
js中的DocumentFragment1
08-08
例如，我们可以使用文档片段作为参数，例如 Node.appendChild 和 Node.insertBefore 等方法，然后将所有子节点添加到文档中，而不是一个节点一个节点地添加。 在 Web 组件（Web components）中，DocumentFragment ...
JavaScript详解(第2版)
04-25
　15.3.1　父节点和子节点　 　15.3.2　兄弟节点　 　15.3.3　nodeName和nodeType属性　 　15.3.4　空白bug　 　15.4　遍历DOM　 　15.5　DOM查看器　 　15.6　查询DOM的快捷方式　 　15.6.1　document.getElement-...
用html增加删除节点,增加和删除节点，HTML DOM常用对象-03
weixin_29141505的博客
06-10 615
16-0909-pm day 03添加和删除:***HTML DOM常用对象:Image Select Table Form Option1. 添加和删除:1.1添加: 3步:创建空元素对象:var a=document.createElement("a");相当于: 设置元素的关键属性:a.href="http://tmooc.cn"a.innerHTML="...
html在节点头部添加子节点,HTML中动态添加节点的两种方法
weixin_34254848的博客
06-17 1003
方法一、function AddNode(name,size,picpath,id){var s=document.createElement( 'span ');s.innerHTML = ' ';document.body.appendChild(s);}方法二：麻烦一些，各个父子控件之间都要appendChild一次。function AddNode(name,size,pic...
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;;//向...
js添加多个子节点_JS创建DOM节点－使用document.createElement()创建子节点或同级节点...
weixin_39520210的博客
12-19 3166
在一个Web页面中，需要弹出一个提示信息显示给用户。基于这个需求，要使用document.createElement()创建一个DOM节点。创建完节点后，还要使用appendChild()或insertBefore()将创建的节点插入到DOM的指定位置。1. createElement(name)创建元素节点createElement()是Document对象中的方法，该方法会根据指定的元素名称n...
html对象添加子元素,Dom节点对象操作方法 ，用document创建节点对象，追加节点，追加内容以及增加，删除，复制...
weixin_36315943的博客
06-25 3502
节点的创建追加创建新节点document.createElement(‘节点名’);追加子节点appendChild把节点对象加到body中document.body.appendChild()var tab = document.createElement('table');//创建节点对象tabletab.innerHTML='hello world';//为节点对象添加内容document....
html中ul折叠,html中ul标签的优化
weixin_34355337的博客
05-31 645
对于前端的优化接触的太少了，平时在pc端上感觉正常，但是到了移动端，时间一长就不行了。今天说说html中ul的优化问题,我给出了一种传统的写法(耗时的),一种优化的写法.模拟一种业务流程吧，类似留言墙，大家留言后，要将留言显示在留言墙上面。开始我们的代码编写吧如果在平时我会这样写，但是假如我接收了一百万条数据，代码如下：没有进行性能优化的案例var List = function(containe...
JavaScript 从入门到放弃（一）事件委托和使用innerHTML添加元素
Tinywan
09-30 374
&#13; 一、使用事件委托 一个简单的需求，比如想给ul下面的li加上点击事件，点击哪个li，就显示那个li的innerHTML。这个貌似很简单！代码如下！ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/tit
innerHTML和innerText属性的区别
weixin_44844866的博客
04-25 228
一、innerHTML：获得一个元素内部的所有内容，包括标签、文本代码 <ul class="web-nav" id="gw"> <li><a href="#">公司官网</a></li> <li><a href="#">帮助中心&nbsp∨</a></li> <li><a href="#">旗下产品&nbsp∨</a></li>
使用innerHTML动态生成标签
想要全栈chris的博客
02-16 1685
var users = [ {"name": "tdxy01","icon":"images/noavatar_small.gif"}, {"name": "沉眠楚人","icon":"images/noavatar_small.gif"}, {"name": "爱上karina","icon":"images/75_avatar_small.jpg"
js添加子节点
05-25
要在 JavaScript 中添加子节点，可以使用以下几个步骤： 1. 创建一个新的节点对象。可以使用 `document.createElement()` 方法来创建一个新的节点对象。 2. 给新的节点对象设置属性或文本内容。可以使用 `element....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值