Javascript Can'；在JS中找不到DIV_Javascript_Html

Javascript Can'；在JS中找不到DIV

javascript html

Javascript Can'；在JS中找不到DIV,javascript,html,Javascript,Html,我正在创建一个网页，我需要按ID获取一个元素，但是当我尝试这样做时，返回的元素是一个空对象。我想因为我想得到的div是在我按下按钮时添加到HTML代码中的，但是我的JS代码是在页面加载时编译的，所以JS找不到div。。。如何使用JS选择我的div <html><head><script> function getDiv(){ var div = document.getElementById('div_name'); div.innerH

我正在创建一个网页，我需要按ID获取一个元素，但是当我尝试这样做时，返回的元素是一个空对象。我想因为我想得到的div是在我按下按钮时添加到HTML代码中的，但是我的JS代码是在页面加载时编译的，所以JS找不到div。。。如何使用JS选择我的div

<html><head><script>
function getDiv(){
     var div = document.getElementById('div_name');
     div.innerHTML = "SOMETHING"; //div is null
     //<div id="div_name"></div> isn't added when the page is loaded
}
function addDiv()
{
    var iDiv = document.createElement('div');
    iDiv.id = 'div_name';
    document.getElementsByTagName('body')[0].appendChild(iDiv);
}
</script></head>
<body>
<button onClick="getDiv()">GETDIV</button>
<!-- Pretend that with this button I add the div with 'div_name' in my HTML 
page -->
<button onClick="addDiv()">ADDDIV</button>
</body></html>


函数getDiv（）{
var div=document.getElementById（'div_name'）；
div.innerHTML=“SOMETHING”//div为空
//加载页面时未添加
}
函数addDiv（）
{
var iDiv=document.createElement（'div'）；
iDiv.id='div_name'；
document.getElementsByTagName（'body'）[0].appendChild（iDiv）；
}
GETDIV
阿迪夫

参考以下代码：-


函数addDiv（）{
var div=document.getElementById（'div_name'）；
var isDivPresent=（div&&（div！==null））；
如果（isDivPresent）{
返回；
}
var createDiv=document.createElement（“div”）；
setAttribute（“id”、“div_name”）；
createDiv.style.backgroundColor=“浅蓝色”；
createDiv.style.width='250px'；
createDiv.style.height='300px'；
document.getElementsByTagName（'body'）[0].appendChild（createDiv）；
}
函数getDiv（）{
var div=document.getElementById（'div_name'）；
var isDivPresent=（div&&（div！==null））；
如果（！isDivPresent）{
addDiv（）；
getDiv（）；
}否则{
div.innerHTML=“某物”；
}     
}
阿迪夫
GETDIV

函数getDiv（）{ var div=document.getElementById（'div_name'）； div.innerHTML=“SOMETHING”//div为空 } 函数addDiv（）{ 如果（！document.getElementById（'div_name'））{ var div=document.createElement（“div”）； div.id='div_name'； div.innerHTML=“通过添加div添加”；文件.正文.附件（div）； } }

GETDIV
ADDDIV

这里有一个代码，可以随您的呼啸而起作用。主要区别在于：

我使用

onclick

作为属性名，而不是

onclick

函数addDiv（）{
var div=document.createElement（'div'）；
div.id='div_name'；
文件.正文.附件（div）；
div.innerHTML='初始内容'；
}
函数updateDiv（）{
var div=document.getElementById（'div_name'）；
div.innerHTML='新内容'；
}


添加div
替换div内容

如果先单击

GETDIV

按钮而不单击

ADDDIV

按钮，则您要查找的div不在文档正文中的任何位置。因此，我将更改

getDiv（）

，如下所示：

function getDiv(){
     var div = document.getElementById('div_name');
     if(!div) { // if div is not added yet, then add it
       addDiv();
     }
     div.innerHTML = "SOMETHING"; //div is null
}

您是否需要触发该功能？例如，单击？尝试将脚本，即函数getDIv调用放在页面底部。你还会考虑使用jQuery框架吗？另外，你能展示部分相关的HTML吗？你的意思是什么？我在单击按钮时调用该函数您可以发布

addDiv（）

函数。另外，getdiv是否仅在adddiv之后单击？如果没有，那么这个div将是未定义的。我将您的代码复制到一个HTML文件中，它可以工作！？！也就是说，单击adddiv然后getdiv可以工作。@AleConti99:-所以你首先要使用按钮单击添加一个div，然后在按钮单击时使用getdiv？@AleConti99:-如果有用，请接受我的答案。