如何在eacharts里添加dom元素

本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考，具体如下： 介绍 DOM是Document Object Modeule的缩写，一般来说，DOM *** 作分成3个方面。 1、DOM Core DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它，用途也远不止仅限于网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML。 例如：document,getElementsByTagName("form")//使用DOM Core来获取表单对象的方法。 2、HTML-DOM 在使用Javascript和DOM为HTML文件编写脚本时，有许多属于HTML-DOM的属性，HTML-DOM的出现甚至比DOM Core还要早，他提供了一些更简明的记号来描述各种HTML元素的属性。 例如：复制代码 代码如下:document.forms //HTML-DOM提供了一个forms对象。 PS:可以看出，获取对象、属性即可以用DOM Core来实现民，也可以用HTML-DOM实现。 3、CSS-DOM CSS-DOM是针对CSS的 *** 作,在javascript中，CSS-DOM主要的作用是获取和设置style对象的各种属性，由此达到网页呈现出各种不同的效果. 例如：复制代码 代码如下:element.style.color="red"//设置某元素的字体颜色的方法。 常用方法 1.查找元素节点 复制代码 代码如下:var $li = $("ul li:eq(0)")//获取ul标记下的第一个li,也可以写成 $("#ulID li:eq(0)") 2.查找元素属性 利用jquery的attr()方法来获取元素的各种属性的值，attr()方法的参数可以是一个，也可以是两个。 当参数是一个时，则是要查询的属性名称。 当参数是两个时，则可以设置属性的值。 alert($("#id").attr("title"))//输出元素的title属性.一个参数 $("#id").attr("title","改变title值")//改变元素的title属性值.二个参数3.添加元素节点 $(html) 简单说明一下$(html)方法会根据传入的html标记字符串创建一个dom对象，并将这个dom对象包装成一个jquery对象返回，总之就是把标记所有html代码都放到$()工厂里面就行了！ 例： var $htmlLi = $(" <li title='香蕉'>香蕉</li>")//创建DOM对象 var $ul = $("ul") //获取UL对象 $ul.append($htmlLi)//将$htmlLi追加到$ul元素的li列表下面列出部分插入节点的方法 方法描述示例Append()向每个匹配的元素内追加内容HTML代码<ul></ul>JQuery代码$(“ul”).append(“<li>AA</li>”)结果<ul><li>AA</li></ul> appendTo()该方法和Append()相反，a.Append(b)是将b追加到a中，而appendTo()是将b追求到a中HTML代码<ul></ul>JQuery代码$ (“<li>AA</li>”).appendTo (“ul”).结果<ul><li>AA</li></ul> Prepend()向每个匹配的元素内部前置内容HTML代码<p>哈哈</p>JQuery代码$(“p”).prepend(“<b>ABC</b>”)结果<p><b>ABC</b>哈哈</p>prependTo()该方法和Prepend()相反，a. Prepend (b)是将b前置到a中，而prependTo ()是将b前置到a中HTML代码<p>哈哈</p>JQuery代码$(“<b>ABC</b>”).prependTo.(“p”)结果<p><b>ABC</b>哈哈</p>After()在每个匹配的元素之后插入内容，是之后HTML代码<p>AAA</p>JQuery代码$(“p”).After(“<b>cc</b>”)结果<p>AAA</p><b>cc</b>insertAfter()和After()相反HTML代码<p>AAA</p>JQuery代码$ (“<b>cc</b>”).After(“p”)结果<p>AAA</p><b>cc</b>Before()在每个匹配的元素之前插入内容HTML代码<p>AAA</p>JQuery代码$(“p”). Before (“<b>cc</b>”)结果<b>cc</b><p>AAA</p>insertBefore()和Before()相反HTML代码<p>AAA</p>JQuery代码$ (“<b>cc</b>”). insertBefore (“p”)结果<b>cc</b><p>AAA</p> 好了，不要斋看，自己动手试试吧:) 4.删除元素节点 由于我们需要经常动态去改变DOM元素，因此Jquery提供了两种删除节点的方法，即remove()和empty() 4.1 remove()方法 $("p").remove()// 我们可以获取到要删除的元素，然后调用remove()方法 $("ul li:eq(0)").remove().appendTo("ul")// 删除ul下面的第一个li标记，然后再把删除的li标记重新加到ul里面，remove()方法返回删除元素的引用，这时你可以继续使用 $("ul li").remove("li[title!=ABC]")//remove可以接受通过参数来选择性的删除符合条件的元素 4.2 empty()方法 严格来讲，empty()方法并不是删除元素，而是清空 例： HTML代码： <ul> <li title="AAA">AAA</li> </ul> JQuery代码： 复制代码 代码如下:$("ul li:eq(0)").empty() 结果 <ul> <li title="AAA"></li> </ul> 记住，只会清空内容，不会请空属性 更多关于jQuery *** 作DOM元素相关内容感兴趣的读者可查看本站专题：《jQuery *** 作DOM节点方法总结》 希望本文所述对大家jQuery程序设计有所帮助。

第一种

1

2

3

4

5

6

7

function insertEle() {

var oTest = document.getElementById("box-one")

var newNode = document.createElement("div")

var reforeNode = document.getElementById("p1")

newNode.innerHTML = " This is a newcon "

oTest.insertBefore(newNode,reforeNode.nextSibling)//新建的元素节点插入id为P1节点元素的后面。

}

第二种

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

// 自定义函数向后插入

function insertAfter( newElement, targetElement)

{

var parent = targetElement.parentNode

if ( parent.lastChild == targetElement )

{

// 如果最后的节点是目标元素，则直接添加。因为默认是最后

parent.a( newElement )

}

else

{

//如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面

parent.insertBefore( newElement, targetElement.nextSibling )

}

}

---