如何使用insertBefore添加新元素？

我想添加文本标签，但我一直收到错误如何使用insertBefore添加新元素？

NOT_FOUND_ERR: DOM Exception 8 
Error: An attempt was made to reference a Node in a context where it does not exist.

这里的JavaScript：

var getexp = document.getElementsByTagName("td")[219]; 
few lines of code here... 
var fsptag = document.createElement('text'); 
fsptag.innerHTML = append1 +fspRound +append2 +ratioRound; 

var fsptext = fsptag.innerHTML; 
fsptag.appendChild(fsptext); 
getexp.insertBefore(fsptag,getexp.childNodes[10]);

我是新来这（只有几天）。据我所知，getexp.childNodes[10]应该是getexp的子节点。它是一个孩子节点。任何帮助在这里将不胜感激。谢谢。

编辑：HTML

<td colspan=2>&nbsp;&raquo;&nbsp; 
<b>Combat level: 20</b> (311855484)&nbsp;<font style='font-size:8px;color:#696156'>+13144516</font> 
<BR><BR>&nbsp;&raquo;&nbsp; 
<b>Troops ready:</b> 100% 
<BR>&nbsp;&raquo;&nbsp; 
<b>Mana:</b> 40/40<BR>&nbsp;&raquo;&nbsp; 
<b>Location:</b> <a href=map.php?cx=50&cy=50>Empire Capital</a> 
<BR><BR><BR><BR><BR> 
<center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="460" height="54" id="showarmy" align="middle">

的HTML看起来是这样的。这是从这里（http://www.lordswm.com/pl_info.php?id=2255）在有关行的源代码204

编辑：

var append1 = "<br><br>&nbsp;&raquo;&nbsp;<b>Total FSP: </b>"; 
var append2 = "<br>&nbsp;&raquo;&nbsp;<b>Ratio: </b>"; 
var fsptag = document.createElement('text'); 
fsptag.innerHTML = append1 +fspRound +append2 +ratioRound;  //fspRound & ratioRound are numbers

然后，当我用这个：getexp.appendChild(fsptag);的附加文本（？HTML）是<object>后结束，即创建（最后一行代码）。我希望它出现在5 <br>标签（html代码的第8行）之间。对不起，我试图自己弄清楚。

来源

2013-02-17 code-guy

什么是HTML是什么样子？ – 2013-02-17 15:45:01

你确定* childNodes [10]存在吗？ – 2013-02-17 15:50:54

我已经添加了HTML – 2013-02-17 16:07:40

createElement(tag_name)创建由tag_name定义的HTML元素。 Afaik，<text>只能出现在<svg>之内。您的目的是创建一个自定义HTML标签吗？如果是这样，你需要使用一些其他的名字。

appendChild()需要一个元件作为参数，而不是一个串。同样，一旦添加了一个元素，它就会从原始位置移开，即在appendChild的参数中使用的变量值变为null。这意味着，如果你想插入一个新的元素两次，你必须在重新插入之前重新创建它。

在现代浏览器的收藏childNodes还含有白色空间和标签之间的新行，所以你可能需要重新计算指数insertBefore()。

编辑

后您编辑您的文章，它更容易理解。我为您保存了简化的fiddle。它可能接近你需要的东西？

在小提琴的基本代码是这样的：

var getexp = document.getElementsByTagName("td")[219]; 
var fsptag = document.createElement('div'); 
fsptag.innerHTML = append1 + fspRound + append2 + ratioRound; 
getexp.insertBefore(fsptag, getexp.childNodes[10]);

来源

2013-02-17 16:32:26 Teemu

“在新浏览器中”是什么意思？ Afaik所有浏览器都这样做，尽管空白节点解析在旧版本中并不一致。 – Bergi 2013-02-17 17:32:34

@Bergi白色空格不包含在旧版浏览器中的'childNodes'中，例如IE <= 8。我的英语可能很差，请随时编辑我的答案：）。 – Teemu 2013-02-17 17:43:37

非常感谢。完美的作品。我想我终于明白了它背后的逻辑。 – 2013-02-17 17:50:22

如何使用insertBefore添加新元素？

回答

相关问题