清除HTML标签中的内容--removeChild

Lisen_1987 2009-03-02 07:24:10

我创建了一个函数，用途是创建元素结点，想要让函数运行之后在页面上显示如下：



<ul id="emotion">

    <li><a href="#"><img src="../image/emotion/1.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/2.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/3.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/4.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/5.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/6.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/7.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/8.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/9.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/10.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/11.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/12.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/13.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/14.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/15.png" alt="" /></a></li>

    <li><a href="#"><img src="../image/emotion/16.png" alt="" /></a></li>

 </ul>

JS代码如下：



function Emotion()

{

  var emotion=document.getElementById("textRichBox");

  var ul=document.createElement("ul");

  ul.setAttribute("id","emotion");

  var li;

  for(var i=1;i<=16;i++)

  {

    li=CreateImg(i);

    ul.appendChild(li);

  }

  ul.style.position="absolute";

  ul.style.top="100px";

  emotion.appendChild(ul);

}



//创建一条<li><a><img>

function CreateImg(num)

{

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

  var a=document.createElement("a");

  var img=document.createElement("img");

  img.setAttribute("src","../image/emotion/"+num+".png");

  a.setAttribute("href","#");

  a.appendChild(img);

  li.appendChild(a);

  

  return li;

}

上面的代码执行之后就会在页面显示出我要的效果，现在的问题是我想让这个函数再点击执行一次的话，就让创建出来的元素消除掉，就像网上的富文本编辑器里面的插入表情的那个效果一样，第一次点击就显示，再点击一下就隐藏

...全文

842 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

杨哥儿 2009-03-03

打赏
举报

什么都不能 2009-03-02

打赏
举报

好久没有写js了，似乎我记得有个document.createRange 可以获取选中的对象，可以用 obj.parentNode.removeChild(obj) 试一下了

杨哥儿 2009-03-02

打赏
举报

如果你用jQuery框架做就太简单了;

Lisen_1987 2009-03-02

打赏
举报

还有if(key == "length")continue;这一语句的作用是什么呢？

Lisen_1987 2009-03-02

打赏
举报

to hanpoyangtitan
<div id="textRichBox"></div>中包括了还有别的元素，用你的方法做的话，其他的元素也会被清除掉，我只要清除掉id为emotion的元素，请问要用什么方法做？
在id为emotion的元素结点之前还有ol标签，我试了emotion.childNodes[1]获取emotion，但是没有效果

什么都不能 2009-03-02

打赏
举报

是不是这样？

<html>



<head>

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

<title>新建网页 1</title>

<style>

.checked {color:#ff00ff;background:#ffff00}

</style>

<SCRIPT LANGUAGE=javascript>

<!--

var isE = false;



function Emotion()

{

  var emotion=document.getElementById("textRichBox");

  if (!isE)

  {

     

	  var ul=document.createElement("ul");

	  ul.setAttribute("id","emotion");

	  var li;

	  for(var i=1;i<=16;i++)

	  {

		li=CreateImg(i);

		ul.appendChild(li);

	  }

	  ul.style.position="absolute";

	  ul.style.top="100px";

	  emotion.appendChild(ul);

	  isE = true; 

  }

  else

  {

	      var c = emotion.childNodes;

		  for(var key in c) {

		      if(key == "length")continue;

			  emotion.removeChild(c[key]);

		  }

		  isE = false;



  }

  

}



//创建一条<li><a><img>

function CreateImg(num)

{

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

  var a=document.createElement("a");

  var img=document.createElement("img");

  img.setAttribute("src","../image/emotion/"+num+".png");

  a.setAttribute("href","#");

  a.appendChild(img);

  li.appendChild(a);

  

  return li;

}





//-->

</SCRIPT>



</head>



<body>

<a href="#" onclick="Emotion()">adsfjkalsdfj</a>

<div id="textRichBox"></div>





</body>



</html>

Lisen_1987 2009-03-02

打赏
举报

有没有哪位高手知道，拜托指点一下，急啊

Lisen_1987 2009-03-02

打赏
举报

to hanpoyangtitan
我的意思不是说做编辑器，是指效果跟编辑器的那个添加表情一样，按一下图标就弹出一个显示一些表情图片的东西，是这样一个效果。
我现在就是能做到弹出来，但是要让它重新隐藏掉就不知道怎么做了，用removeChild也不行，因为我在源文件里面找不到创建的元素结点，不知道为什么会这样

什么都不能 2009-03-02