在 JS 中找不到 DIV

我正在创建一个网页，我需要通过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>

参考下面的代码：-

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script>
function addDiv(){
    var div = document.getElementById('div_name');
    var isDivPresent = (div && (div !== null ));
    if(isDivPresent){
    	return;
    }
	var createDiv = document.createElement("div");
	createDiv.setAttribute("id", "div_name");
	createDiv.style.backgroundColor = "lightblue";
	createDiv.style.width='250px';
	createDiv.style.height='300px';
	document.getElementsByTagName('body')[0].appendChild(createDiv);
}
function getDiv(){
    var div = document.getElementById('div_name');
    var isDivPresent = (div && (div !== null ));
    
    if(!isDivPresent) { 
       addDiv();
       getDiv();
    }else {
     	div.innerHTML = "SOMETHING";
    }     
}
</script>
</head>
<body>
<button onClick="addDiv()">ADDDIV</button>
<button onClick="getDiv()">GETDIV</button>
</body>
</html>

function getDiv(){
     var div = document.getElementById('div_name');
     div.innerHTML = "SOMETHING"; //div is null
}
function addDiv(){
   if(!document.getElementById('div_name')){
     var div = document.createElement("div");
     div.id = 'div_name';
     div.innerHTML = "Added Through add div";
     document.body.appendChild(div);
   }
}

<button onClick="getDiv()">GETDIV</button>
<button onClick="addDiv()">ADDDIV</button>

这里有一个代码，可以随心所欲地工作。主要区别在于：

我使用 onclick 作为属性名称而不是onClick

function addDiv() {
			var div = document.createElement('div');
			div.id = 'div_name';
			document.body.appendChild(div);
			div.innerHTML = 'initial content';
		}
		function updateDiv() {
			var div = document.getElementById('div_name');
			div.innerHTML = 'new content';
		}

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<button onclick="addDiv();">add div</button>
		<button onclick="updateDiv();">replace div content</button>
	</body>
</html>

如果单击"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
}

相关内容

最新更新

热门标签：