无法设置元素的值

Question

在函数内创建 HTML 输入元素。调用该函数后，元素显示在该位置上，我可以输入它，但无法通过脚本访问它。经过研究，我添加了一个检查该元素是否存在，如果存在，我仍然无法在脚本中更改其值...我可以使用 document.getElementById("txtSearchBelow").value = 'access me 更改控制台中的值'<div id = "searchResults"></div>document.getElementById("searchResults").innerHTML = '<input id="txtSearchBelow"class="form-control" type="text" placeholder="Search..">'+'<br>';var inputBelow = document.getElementById("txtSearchBelow");console.log(inputBelow);console.log('until here it seems fine.');var element = document.getElementById("txtSearchBelow"); //If it isn't "undefined" and it isn't "null", then it exists.if(typeof(element) != 'undefined' && element != null){    alert('Element exists!');// this here doesnt work. why not?    document.getElementById("txtSearchBelow").value = 'eyyy please access me'; } else{    alert('Element does not exist!');}我怎么可以通过控制台更改值，但不能在脚本中更改值？编辑：它的工作有延迟！太感谢了 ！

Answer 1

我想说这是因为它创建元素的渲染时间比它后面的逻辑要长。

意思是你的 var element = document.getElementById("txtSearchBelow"); 在浏览器识别该元素之前执行。

在调用 document.getElementById("txtSearchBelow") 之前放入延迟计时器

Answer 2

它工作得很好，我没有收到你的抱怨......

document.getElementById("searchResults").innerHTML = '<input id="txtSearchBelow"class="form-control" type="text" placeholder="Search..">'+'<br>';

var inputBelow = document.getElementById("txtSearchBelow");

console.log(inputBelow);

console.log('until here it seems fine.');

var element = document.getElementById("txtSearchBelow");

// If it isn't "undefined" and it isn't "null", then it exists.

if (typeof(element) != 'undefined' && element != null) {

    console.log('Element exists!');

    // This line works for me...!

    document.getElementById("txtSearchBelow").value = 'eyyy please access me'; 

} else {

    console.log('Element does not exist!');

}

<div id="searchResults"></div>

Answer 3

也许是浏览器的问题？计算机系统和加载延迟是可能的。我可以运行它