在javascript和jquery中将元素附加到父元素后如何获取元素的位置？答案

【问题标题】：How to get position of element after appending it to parent in javascript and jquery?在javascript和jquery中将元素附加到父元素后如何获取元素的位置？
【发布时间】：2016-08-22 05:12:55
【问题描述】：

var t = 0, i = 0;
var letter = document.createElement('span')
letter.id = "x" + t + "x" + i;
letter.innerHTML = text[t];
highlight.appendChild(letter);
var position = $("#" + "x" + t + "x" + i).position();

这是代码，它一直说字母未定义。

【问题讨论】：

ID 不能以数字开头。
问题是位置没有更新换行符
在 HTML 5 规范中，ID 可以以数字开头。见stackoverflow.com/questions/70579/…。

标签： javascript jquery position append element

【解决方案1】：

假设highlight 是一个实际的DOM 节点（不是未定义的）并且text 之前已定义，最可能的原因是在DOM 加载之前执行脚本。尝试将您的脚本放在 html 的底部，就在结束 </body>-Tag 之前。

这是一个工作代码：https://jsfiddle.net/n9xk85b7/

【讨论】：

var text = ["ab", "cde"]; var hightlight = document.getElementById('highlight');变量 t = 0，我 = 0； var letter = document.createElement('span') letter.id = t + "x" + i; letter.innerHTML = "asdfasdfasdfasdfasdfasdfasdf
"; highlight.appendChild(字母); var letter = document.createElement('span') letter.id = t + "x" + i; letter.innerHTML = 文本[t]; highlight.appendChild(字母); var 位置 = $("#" + t + "x" + i).position(); document.getElementById('result').innerHTML = "top: " + position.top + ", left: " + position.left;
当你看到另一个附加元素出现换行符时，它没有得到右上偏移
我发现如果我不使用 append 而使用 innerhtml 就可以了