访问创建的DOM元素

时间:2020-03-06 14:40:50  来源:igfitidea点击:

我有代码可以在单击按钮时创建另一个"行"(带有输入的div)。我正在创建新的输入元素,并且一切正常,但是,我找不到访问这些新元素的方法。

示例:我有输入元素(下面的名称_1)。然后,我使用javascript的createElement函数创建另一个输入元素(下面的名称_2)。

<input type='text' id='name_1' name="name_1" />
<input type='text' id='name_2' name="name_2" />

同样,我将元素创建得很好,但是我希望能够在用户创建和修改name_2之后访问其名称。范例:document.getElementById('name_2');

这是行不通的。如何使DOM识别新元素?是否有可能?

我的代码示例(使用jQuery):

function addName(){
var parentDiv = document.createElement("div");
$(parentDiv).attr( "id", "lp_" + id );

var col1 = document.createElement("div");
var input1 = $( 'input[name="lp_name_1"]').clone(true);
$(input1).attr( "name", "lp_name_" + id );
$(col1).attr( "class", "span-4" );
$(col1).append( input1 );

$(parentDiv).append( col1 );

$('#main_div').append(parentDiv);
}

我同时使用了jQuery和JavaScript选择器。示例:$('#lp_2')。html()返回null。 document.getElementById('lp_2');也是如此。

解决方案

我们必须创建元素,然后使用诸如appendChild之类的功能将其添加到DOM中。有关详细信息,请参见此处。

我的猜测是我们调用了createElement(),但从未将其添加到DOM层次结构中。

如果已正确将其添加到dom树中,则可以使用document.getElementById对其进行查询。但是,浏览器错误可能会引起麻烦,因此请使用可解决浏览器错误的JavaScript工具包(如jQuery)。

var input1 = $( 'input[name="lp_name_1"]').clone(true);

我们发布的代码未指示具有该名称属性的任何元素。在此部分之前,我们将创建一个具有类似id属性的元素,但是我们将使用$("#lp_1")`来选择它,甚至在将其插入文档中之前,该元素也无法使用直到之后我们才做。

var input1 = $( 'input[name="lp_name_1"]').clone(true);

应该

var input1 = $( 'input[@name="lp_name_1"]').clone(true);

首先尝试,检查input1是否实际返回了某些内容(可能是某种调试语句),以确保这不是问题。

编辑:刚刚被告知这仅适用于旧版本的JQuery,所以请忽略我的建议。

非常感谢回答。走开并返回我的代码后,我注意到自己犯了一个错误。我有两个功能以不同的方式添加了这一行。我" 100%确信"我在调用正确的代码(我发布的代码示例),但是可惜,我不是。

对于那些也遇到问题的人,我想说我收到的所有答案都是一个很好的开始,并且我已使用它们进行调试,它们将确保代码正确。

我的代码示例对我所需要的内容是100%正确的,我只需要调用它即可。 (Du!)

再次感谢你的帮助,

-杰米