动态插入对象(ul),为什么css不起作用？

ajn_sailing 2009-04-07 05:56:08
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=GB231">
<link href="./images/p2p.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./images/external.js"></script>
<script type="text/javascript">

<div class="rbox2">
<div class="inner_rbox2">
<div class="title3"><strong>正在下载</strong></div>
<div class="down_info"><span class="s5">开始任务</span> <span class="s6">暂停任务</span> <span class="s3">删除任务</span> <span class="s4">设置</span></div>
<div class="down_text" id="medialist">
<ul class="clearfix ul_title" id="listTitle">
<li class="lis1">文件名</li>
<li class="lis2">大小</li>
<li class="lis4">进度</li>
<li class="lis3">速度</li>
</ul>
<ul class="clearfix" id="firstList">
<li class="lis1"><input type="checkbox" ID="Checkbox1" NAME="Checkbox1"/>英法河浅单法河浅单法河浅单</li>
<li class="lis2">2007.80M</li>
<li class="lis4"><div class="down_loading"><span style="width:10%;" class="bfb"><span>10%</span>  </span></div></li>
<li class="lis3">132Kb/s</li>
</ul>
<ul class="clearfix">
<li class="lis1"><input type="checkbox" ID="Checkbox2" NAME="Checkbox1"/>英法河浅单法河浅单法河浅单</li>
<li class="lis2">2007.80M</li>
<li class="lis4"><div class="down_loading"><span style="width:10%;" class="bfb"><span>10%</span>  </span></div></li>
<li class="lis3">132Kb/s</li>
</ul>

</div>
</div>
</div>
</div>
<script type="text/javascript">
function insertAfter(newElement,targetElement)
{
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement)
{
// 如果最后的节点是目标元素，则直接添加。因为默认是最后
parent.appendChild(newElement);
}
else
{
parent.insertBefore(newElement,targetElement.nextSibling);
//如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
}
}
window.onload = function()
{
var nod = document.createElement("ul");
var str;
str = "<ul class='clearfix'><li class='list1'><input type='checkbox' id='Checkbox2'/>英法河浅单法河浅单法河浅单</li>";
str = str+"<li class='list2'>2007.80M</li>";
str = str+"<li class='list4'><div class='down_loading'><span style='width:10\%;' class='bfb'><span>10\%</span> </span></div></li>";
str = str+"<li class='list3'>132Kb/s</li>";
str = str+"</ul>";
nod.innerHTML = str;
var mubiao = document.getElementById("firstList");
insertAfter(nod,mubiao);
}

</script>

运行html显示确实插入ul对象了，但css不起作用
(原ul按照css外观布局正常显示)
...全文
333 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
ajn_sailing 2009-04-08
  • 打赏
  • 举报
 回复
谢谢caiying2009,谢谢各位回帖网友
caiying2009 2009-04-07
  • 打赏
  • 举报
 回复 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 

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

<head> 

<title> </title> 

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

<link href="./images/p2p.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript" src="./images/external.js"> </script> 

<style>

/*-- for test--*/

.clearfix{font-size:12px;color:red}

</style>

<div class="rbox2"> 

<div class="inner_rbox2"> 

<div class="title3"> <strong>正在下载 </strong> </div> 

<div class="down_info"> <span class="s5">开始任务 </span> <span class="s6">暂停任务 </span> <span class="s3">删除任务 </span> <span class="s4">设置 </span> </div> 

<div class="down_text" id="medialist"> 

<ul class="clearfix ul_title" id="listTitle"> 

<li class="lis1">文件名 </li> 

<li class="lis2">大小 </li> 

<li class="lis4">进度 </li> 

<li class="lis3">速度 </li> 

</ul> 

<ul class="clearfix" id="firstList"> 

<li class="lis1"> <input type="checkbox" ID="Checkbox1" NAME="Checkbox1"/>英法河浅单法河浅单法河浅单 </li> 

<li class="lis2">2007.80M </li> 

<li class="lis4"> <div class="down_loading"> <span style="width:10%;" class="bfb"> <span>10% </span>   </span> </div> </li> 

<li class="lis3">132Kb/s </li> 

</ul> 

<ul class="clearfix"> 

<li class="lis1"> <input type="checkbox" ID="Checkbox2" NAME="Checkbox1"/>英法河浅单法河浅单法河浅单 </li> 

<li class="lis2">2007.80M </li> 

<li class="lis4"> <div class="down_loading"> <span style="width:10%;" class="bfb"> <span>10% </span>   </span> </div> </li> 

<li class="lis3">132Kb/s </li> 

</ul> 



</div> 

</div> 

</div> 

</div> 

<script type="text/javascript"> 

function insertAfter(newElement,targetElement) 

{ 

  var parent = targetElement.parentNode; 

  if (parent.lastChild == targetElement) 

  { 

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

    parent.appendChild(newElement); 

  } 

  else 

  { 

    parent.insertBefore(newElement,targetElement.nextSibling); 

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

  } 

} 

window.onload = function() 

{ 

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

nod.className='clearfix'//加上class=clearfix

var str; 

str = "<li class='list1'> <input type='checkbox' id='Checkbox2'/>英法河浅单法河浅单法河浅单 </li>"; 

str = str+" <li class='list2'>2007.80M </li>"; 

str = str+" <li class='list4'> <div class='down_loading'> <span style='width:10\%;' class='bfb'> <span>10\% </span>  </span> </div> </li>"; 

str = str+" <li class='list3'>132Kb/s </li>"; 

nod.innerHTML = str; 

var mubiao = document.getElementById("firstList"); 

insertAfter(nod,mubiao); 

} 

</script> 



</body>



</html>
ajn_sailing 2009-04-07
  • 打赏
  • 举报
 回复
怎么修改程序呢？

我以前做C++的，对web有点手潮
caiying2009 2009-04-07
  • 打赏
  • 举报
 回复
5 楼已回答了^_^

ajn_sailing 2009-04-07
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 caiying2009 的回复:]
var nod = document.createElement("ul");

str = " <ul class='clearfix'> <li class='list1'> <input type='checkbox' id='Checkbox2'/>英法河浅单法河浅单法河浅单 </li>";

nod.innerHTML = str;


结果：

<ul>
<ul class="clearfix">
<li class="list1"> <input id="Checkbox2" type="checkbox">英法河浅单法河浅单法河浅单
</li>

[/Quote]

您说的对，怎么改呢？
str = " <ul class='clearfix'> <li class='list1'> <input type='checkbox' id='Checkbox2'/>英法河浅单法河浅单法河浅单 </li>";

如果把“<ul class='clearfix'>”去掉，则变为<ul>,如何把class=clearfix加上？谢谢!
mike_24 2009-04-07
  • 打赏
  • 举报
 回复
可能是优先级的问题.
caiying2009 2009-04-07
  • 打赏
  • 举报
 回复
var nod = document.createElement("ul");

str = " <ul class='clearfix'> <li class='list1'> <input type='checkbox' id='Checkbox2'/>英法河浅单法河浅单法河浅单 </li>";

nod.innerHTML = str;


结果：

<ul>
<ul class="clearfix">
<li class="list1"><input id="Checkbox2" type="checkbox">英法河浅单法河浅单法河浅单
</li>
caiying2009 2009-04-07
  • 打赏
  • 举报
 回复 


window.onload = function() 

{ 

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

nod.className='clearfix'

var str; 

str = "<li class='list1'> <input type='checkbox' id='Checkbox2'/>英法河浅单法河浅单法河浅单 </li>"; 

str = str+" <li class='list2'>2007.80M </li>"; 

str = str+" <li class='list4'> <div class='down_loading'> <span style='width:10\%;' class='bfb'> <span>10\% </span>  </span> </div> </li>"; 

str = str+" <li class='list3'>132Kb/s </li>"; 

nod.innerHTML = str; 

var mubiao = document.getElementById("firstList"); 

insertAfter(nod,mubiao); 

}
caiying2009 2009-04-07
  • 打赏
  • 举报
 回复
插入<ul>后的结构：


<div class="rbox2">

	<div class="inner_rbox2">

		<div class="down_text" id="medialist">

			<ul class="clearfix ul_title" id="listTitle">

				<li class="lis1">文件名 

				</li>

				<li class="lis2">大小 

				</li>

				<li class="lis4">进度 

				</li>

				<li class="lis3">速度 </li>

			</ul>

			<ul class="clearfix" id="firstList">

				<li class="lis1">

				<input id="Checkbox1" type="checkbox" name="Checkbox2" value="ON">英法河浅单法河浅单法河浅单 

				</li>

				<li class="lis2">2007.80M 

				</li>

				<li class="lis4">

				<div class="down_loading">

					<span class="bfb" style="WIDTH: 10%">10%   </span></div>

				</li>

				<li class="lis3">132Kb/s </li>

			</ul>

			<ul>

				<ul class="clearfix">

					<li class="list1"><input id="Checkbox2" type="checkbox">英法河浅单法河浅单法河浅单 

					</li>

					<li class="list2">2007.80M </li>

					<li class="list4">

					<div class="down_loading">

						<span class="bfb" style="WIDTH: 10%">10%   </span></div>

					</li>

					<li class="list3">132Kb/s </li>

				</ul>

			</ul>

			<ul class="clearfix">

				<li class="lis1">

				<input id="Checkbox2" type="checkbox" name="Checkbox1">英法河浅单法河浅单法河浅单 

				</li>

				<li class="lis2">2007.80M 

				</li>

				<li class="lis4">

				<div class="down_loading">

					<span class="bfb" style="WIDTH: 10%">10%   </span></div>

				</li>

				<li class="lis3">132Kb/s </li>

			</ul>

		</div>

	</div>

</div>

被插入的<ul>位于<ul>之内，css很有可能失效
ajn_sailing 2009-04-07
  • 打赏
  • 举报
 回复
对手写的ul起作用，但对动态插入的ul似乎未完全起作用，li之间无间隔(本应有间隔)
mumu_java 2009-04-07
  • 打赏
  • 举报
 回复
清一下浏览器缓存试试，应该可以显示出css效果。
luojihaidao 2009-04-07
  • 打赏
  • 举报
 回复
你CSS全导入了吗?
如何应用ul、li标签 创建css横向导航菜单？
我们制作导航条按照传统的方法由放在一行表格单元里的图形图像构成，或者由单元格内的文字所组成，由于人们不再推荐用表格来定位任何非表格的页面内容，所以很多制作Web的人正在寻找新的方法，用结构化的XHTML标记和CSS格式来创建导航条。这样的创建方式也更对搜索引擎蜘蛛友好，这对我们来说是非常重要的。 　　创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来
用ul、li标签 创建css横向导航菜单？
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。 　　现在我们正常的做法是应用ul、li标签把链接作为无序列表（unordered
html ul li做左侧菜单,用ul、li标签创建css横向导航菜单示例
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。现在我们正常的做法是应用ul、li标签把链接作为无序列表(unordered list)...
css中用来去除列前面的黑点,CSS中去除li前面的小黑点,a下划线 和ul、LI部分属性方法...
对于很多人用div来做网站时，总会用到，但在显示效果时前面总是会有一个小黑点，这个令很多人头痛，但又找不到要源，其它我们可以用以下方法来清除。1、在CSS中写入代码。找到相关性的CSS，在。.li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见。2、在相关的页面找到head部分写入下面的代码3、在li,u...
jquery使用html()css不生效,jQuery css()方法的用法
样式操作，指的是使用 jQuery 来操作一个元素的 CSS 属性。在 jQuery 中，对于样式操作共有以下 3 种：CSS 属性操作；CSS 类名操作；个别样式操作。在 jQuery 中，CSS 属性的操作有两种情况：一种是“获取属性”，另一种是“设置属性”。jQuery css()方法获取属性值在 jQuery 中，我们可以使用 css() 方法来获取某一个元素的 CSS 属性的取值。语法：...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章