Question

我正在创建一个webPage，我需要通过ID获取一个元素，但是当我尝试这样做时，返回的元素是一个null对象。我想因为当我按下按钮时，我想要得到的div被添加到HTML代码中，但我的JS代码是在页面加载时编译的，所以JS找不到div ...我怎样才能选择我的div与JS？

<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>

Answer 1

参考下面的代码： -

<!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>

Answer 2

＆＃13;

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);
   }
}

＆＃13;

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

＆＃13;

Answer 3

这是一个可以正常工作的代码。主要区别是：

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

＆＃13;

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';
		}

＆＃13;

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

＆＃13;

Answer 4

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

在JS中找不到DIV

4 个答案: