Question

我正在尝试使用Javascript函数将节点填充到某个位置。像appendChild(document.getElementById("foo"))这样的东西。但是，我无法完全控制周围的代码，并且某些元素可能具有相同的ID。请考虑以下事项：

<div id="foo">
<span id = "bar">456</span>
<script type="text/javascript">document.write(document.getElementById("bar").innerText);</script>
</div>

<hr>

<div id="foo">
<span id = "bar">123</span>
<script type="text/javascript">document.write(document.getElementById("bar").innerText);</script>
</div>

在大多数浏览器中，输出将为：

456 456 
123 456

而不是我想要的，这是

456 456 
123 123

这个结果对我来说完全不足为奇;我明白为什么会这样。我希望我可以更像是

进行javascript调用

document.write(myscriptnode.parent.childnodes['bar'].innerText)

假设我无法控制除脚本标记内容之外的任何内容，有没有办法实现此目的？

Answer 1

如何使用像jQuery这样的JavaScript库，它允许你编写类似于get -lementById的CSS-selector-like-syntax insead，还有一些有用的辅助方法，如parent（）。

http://jquery.com/

Answer 2

这是解决此问题的一种令人难以置信的可怕方式：不是尝试获取当前节点，而是创建具有任意ID的新节点，然后在完成后将其删除。

<div id="foo">
<span id = "bar">456</span>
<script type="text/javascript">
    document.write('<span id = "bfrogtmp"></span>');
    var y = document.getElementById("bfrogtmp");
    document.write(y.parentNode.children['bar'].innerHTML);
    y.parentNode.removeChild(y);
</script>
</div>

<hr>

<div id="foo">
<span id = "bar">123</span>
<script type="text/javascript">
    document.write('<span id = "bfrogtmp"></span>');
    var y = document.getElementById("bfrogtmp");
    document.write(y.parentNode.children['bar'].innerHTML);
    y.parentNode.removeChild(y);
</script>
</div>

基于位置获取基于Javascript元素的元素节点

2 个答案: