Question

我有一些代码，我正在尝试运行以获取现有元素，但它仍然返回null，尽管它存在于开发人员控制台中。我已经阅读了一些关于等到窗口加载才开始调用的东西，但我尝试放置的代码不会在启动时运行并等到用户操作。

我甚至运行了以下内容并返回null：

massText = document.createElement('mass_div');
console.log(document.getElementById('mass_div'));

有谁能告诉我为什么这会返回null？我刚刚创建了元素，为什么我不能得到它？我甚至尝试在启动时初始化它然后获取它仍然返回null。我希望能够编辑现有的元素，而不是继续创建它们只是修改我的显示文字：

massText.innerHTML = "blah";

这是更多背景信息。它不完全是这样的：

//lots of functions that create a model and then call this update method. Called every 500ms

function updateText() {
    massText = document.createElement('mass_div');
    massText.style.position = 'absolute';
    massText.style.width = 100;
    massText.style.height = 100;
    massText.style.backgroundColor = "green";
    massText.innerHTML = "Mass of the star is " + matches[pos] + " Solar Masses";
    massText.style.top = window.innerHeight / 10 + 'px';
    massText.style.left = window.innerWidth / 50 + 'px';
    document.body.appendChild(massText);
}

这会创建大量元素“mass_div”

的副本

我想通过做类似的事情来附加这些，但是它说massText是空的

function updateText() {
    if (document.getElementById('mass_div') == null){
         massText = document.createElement('mass_div');
    }else {
         massText=document.getElementById('mass_div');
    }
    massText.style.position = 'absolute';
    massText.style.width = 100;
    massText.style.height = 100;
    massText.style.backgroundColor = "green";
    massText.innerHTML = "Mass of the star is " + matches[pos] + " Solar Masses";
    massText.style.top = window.innerHeight / 10 + 'px';
    massText.style.left = window.innerWidth / 50 + 'px';
    document.body.appendChild(massText);
}

Answer 1

为此，你应该这样做：

var massText = document.createElement('div');
massText.id='mass_div'
document.appendChild(massText)
console.log(document.getElementById('mass_div')); //This is working

在您的代码中，您有两个问题：

函数createElement获取元素name而非元素id。因此，您必须稍后添加id
函数getElementById仅获取附加到document的元素。所以你必须在

Answer 2

我们走了：

var massText = document.createElement('input');  //Here is you create the element input.
masstext.id ='mass_div';      //Here is you set id for created element input
document.appendChild(massText);  //Added to main document


console.log(document.getElementById('mass_div'));  //handle your element by id and log

这是100％的工作！

Answer 3

在处理XML或Html Dom时，一般（无论是java，javascript还是c＃）算法都是一样的，简单： 1.从字符串或类似文件创建或加载文档， 2.如果没有根节点（新文档）创建根节点或找到现有根节点， 3.根据需要创建具有属性和值的子节点（有多个构造函数）， 4.将子节点附加到根节点（或另一个子节点 - 如您所愿）。 5.你可以触发getElementById或GetElementByTag或类似的东西来查找在第3点创建的节点。

你粘贴了很少的代码，但我认为你跳过了第4步，这就是NRE的原因。

在示例中缺少的部分（应该放在console.log（“aaa”）之前： JS：

var aaa = document.createElement("mass_div");
document.body.appendChild(aaa);

C＃：

var aaa = doc.CreateElement("mass_div");
rootNode.AppendChild(aaa);

爪哇：

var aaa = doc.createElement("mass_div");
doc.appendChild(aaa)

或多或少这应该适合您的需求并希望它有所帮助。亲切的问候，

P.Sz。

document.getElementById即使在创建后也返回null

3 个答案: