能否在某个网页元素后面增加东西?
<div>
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
......
......
......
<div>
能否在id123的后面(而不是后部)增加文本或者HTML元素?变成
<div>
<div id= "id123 "> 456 </div> 这里是我添加的文本 <span> 这里是我添加的元素 </span>
<div id= "id789 "> abc </div>
......
......
......
<div>
[解决办法]
这样行不?
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> new page </title>
<script>
function a(){
var oDiv=document.getElementById( "id123 ");
oDiv.outerHTML=oDiv.outerHTML+ "这里是我添加的文本 <span> 这里是我添加的元素 </span> ";
alert(document.body.innerHTML);
}
</script>
</head>
<body onload= "a() ">
<div>
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
</div>
</body>
</html>
[解决办法]
可以:
<script type= "text/javascript ">
function insd(){
var mydiv=document.getElementById( "id123 ");
myspan=document.createElement( "span ");
myspan.innerHTML= "这里是我添加的元素 ";
mydiv.parentNode.insertBefore(myspan,mydiv.nextSibling);
}
</script>
<div id= "id123 "> 456 </div> <div id= "id789 "> abc </div>
......
......
......
</div>
<input type= "button " value= "插入 " onclick= "insd() " />
[解决办法]
<script language= "javascript " type= "text/javascript ">
function $()
{
var arr=new Array()
var divs=document.getElementById( "hjx ").getElementsByTagName( "div ");
for(var i=0;i <divs.length;i++)
{
arr[i]=divs[i];
}
for(var i in arr)
{
document.getElementById( "hjx ").appendChild(arr[i]);
var sp=document.createElement( "span ");
sp.innerHTML= "这里是我添加的元素 ";
document.getElementById( "hjx ").appendChild(sp);
}
}
</script>
<input type= "button " value= "测试 " onclick= "$() " />
<div id= "hjx ">
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
<div>
[解决办法]
<script language= "javascript " type= "text/javascript ">
function $()
{
var arr=new Array()
var divs=document.getElementById( "hjx ").getElementsByTagName( "div ");
for(var i=0;i <divs.length;i++)
{
arr[i]=divs[i];
}
for(var i=0;i <arr.length-1;i++)
{
document.getElementById( "hjx ").appendChild(arr[i]);
var sp=document.createElement( "span ");
sp.innerHTML= "这里是我添加的元素 ";
document.getElementById( "hjx ").appendChild(sp);
}
}
</script>
<input type= "button " value= "测试 " onclick= "$() " />
<div id= "hjx ">
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
<div>
[解决办法]
<script type= "text/javascript " src= "http://code.jquery.com/jquery-latest.pack.js "> </script>
<script type= "text/javascript ">
$(document).ready(function(){
$( "#hjx ").append( ' <div> 789 </div> ');
});
</script>
<div id= "hjx ">
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
<div>
[解决办法]
看错要求:
改个函数即可...
<script type= "text/javascript " src= "http://code.jquery.com/jquery-latest.pack.js "> </script>
<script type= "text/javascript ">
$(document).ready(function(){
$( "#id123 ").after( '这是俺的文本 <span> 文本哇 </span> 测试 ');
});
</script>
<div id= "hjx ">
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
<div>
[解决办法]
在随意指定的位置应该不行吧,添加到一个容器的后面应该没有问题的,从你的描述来看除非先定位一个容器容然后再加东西进去,有高手出来再看看。
[解决办法]
最好放在容器里
遵循DOM标准
[解决办法]
<script type= "text/javascript " src= "http://code.jquery.com/jquery-latest.pack.js "> </script>
<script type= "text/javascript ">
$(document).ready(function(){
$( "div/div ").click(function(){
var id=$(this).attr( 'id ');
$(this).after( '在后 '+id+ '面加入的这串文本 ');
});
});
</script>
<div id= "hjx ">
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
<div>
[解决办法]
cgisir(☆☆☆===http://www.hansir.cn===☆☆☆) 的方法也不行吗?
[解决办法]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv=Content-Type content= "text/html;charset=utf-8 ">
<META NAME= "Generator " CONTENT= "EditPlus ">
<META NAME= "Author " CONTENT= " ">
<META NAME= "Keywords " CONTENT= " ">
<META NAME= "Description " CONTENT= " ">
<SCRIPT LANGUAGE= "JavaScript ">
<!--
function test(){
var div = document.getElementById( "div ");
var div789 = document.getElementById( "id789 ");
var span = document.createElement( "span ");
span.style.border= "solid 1px green ";
var txt = document.createTextNode( "这里是我添加的元素 ");
span.appendChild(txt);
div.insertBefore(span, div789);
var txtNode = document.createTextNode( "这里是我添加的文本 ");
div.insertBefore(txtNode, span);
}
//-->
</SCRIPT>
</HEAD>
<BODY onload= "test() ">
<div id= "div ">
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
</div>
</BODY>
</HTML>
[解决办法]
方法:parentNode.insertBefore(newNode,currentChildNode)
功能:往parentNode节点中的currentChildNode子节点的前面插入newNode
[解决办法]
注意没有insertAfer方法
[解决办法]
<!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/xhtml ">
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " />
<title> 无标题文档 </title>
</head>
<body>
<div>
<div id= "id123 "> 456 </div>
<div id= "id789 "> abc </div>
</div>
</body>
</html>
<script type= "text/javascript ">
//建立文档碎片,将要添加的文本和span文本一一添加
var oDf = document.createDocumentFragment();
var oText = document.createTextNode( "这里是我添加在id789后的元素; ");
var oSpan = document.createElement( "span ");
var oSpanText = document.createTextNode( "这里是我添加span里的元素 ");
oSpan.appendChild(oSpanText);
oDf.appendChild(oText);
oDf.appendChild(oSpan);
//判断指定节点的是否存在下一个节点,分别处理
var selectNode = selectNode1 = document.getElementById( "id123 ");
//区别ie和firefox对待空白节点的不同定义
try{
do
{
selectNode = selectNode.nextSibling;
}while(!selectNode.id)
selectNode.parentNode.insertBefore(oDf,selectNode);
}
catch(ex){
selectNode1.parentNode.appendChild(oDf);
}
</script>