Question

js新功能，无法找到答案。我认为它非常基本，但

我的js代码删除了我之前写的任何html。我想发生的事情-当按下“加载”按钮时，脚本将运行并创建按钮，而不会删除“加载”按钮本身和h1标签。

感谢您的帮助！

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta charset="utf-8" />
    <title></title>



</head>
<body>




<h1>check</h1>

<button onclick="printbtns()">load</button> 

<script>	
	
	
	function printbtns()
	{
		gobtns('A',18);
		gobtns('B',19);
		gobtns('C',20);
		gobtns('D',21);
		gobtns('E',22);
		gobtns('G',9);
	}

	function gobtns(letter,numberofstorages)
	{
	//window.alert("sometext");
	document.write(letter);	
	document.write("<br>");
	var i;


	for (i=1; i<=numberofstorages; i++){ 
		var str1=letter.concat(i);
		var btn = document.createElement("BUTTON");
		var t = document.createTextNode(str1);
		btn.setAttribute("style","color:red;font-size:23px");
		btn.appendChild(t);
		btn.setAttribute("id", str1);
	   document.body.appendChild(btn);
	}

	document.write("<br><br>");
	}

</script>

</body>
</html>

Answer 1

document.write将擦除当前文档（如果已加载该文档）-最好使用一种更现代，更容易混淆的方法来插入新内容，例如使用{{1创建元素}} / createElement或使用appendChild：

.innerHTML

和

function insertBR() {
  document.body.appendChild(document.createElement('br'));
}

document.body.appendChild(document.createTextNode(letter));
insertBR();`document.write` will *erase the current document* if the document is already loaded - better to use a more modern, less confusing method of inserting new content, such as creating elements with `createElement` / `appendChild` or using `.innerHTML`:

function printbtns() {
  gobtns('A', 18);
  gobtns('B', 19);
  gobtns('C', 20);
  gobtns('D', 21);
  gobtns('E', 22);
  gobtns('G', 9);
}

function insertBR() {
  document.body.appendChild(document.createElement('br'));
}
function gobtns(letter, numberofstorages) {
  insertBR();
  //window.alert("sometext");
  document.body.appendChild(document.createTextNode(letter));
  insertBR();
  var i;


  for (i = 1; i <= numberofstorages; i++) {
    var str1 = letter.concat(i);
    var btn = document.createElement("BUTTON");
    var t = document.createTextNode(str1);
    btn.setAttribute("style", "color:red;font-size:23px");
    btn.appendChild(t);
    btn.setAttribute("id", str1);
    document.body.appendChild(btn);
  }

  insertBR();
  insertBR();
}

为什么javascript在我之前的html上运行

1 个答案: