Question

我正在尝试使用document.write（）命令将js页面main.js中的html页面（home.html）中的ids = DIV1和DIV2的文本添加到两个DIVS中。单击html页面中的按钮时，相应的文本必须出现在hmtl页面中。

代码如下。我不断收到错误消息：document.write可以是eval的一种形式。是否可以使用document.write（）并在div部分中打印文本。

HTML代码：

<head>
  <script src="main.js" type="text/javascript"></script>
</head>
<body>
  <form>
    <input type="button" value="click!" onclick="xyz()">
  </form>
</body>

JAVASCRIPT代码：

function xyz(){
  var arr={name:"abc",school:"pqrst"};
  document.write('<div id="div1">'+"Name:"+ arr.name +'</div>');
  document.write('<div id="div2">'+"School:"+ arr.school +'</div>');
}

名称：abc 学校：pqrst

Answer 1

...使用document.write（）命令

不要。仅在页面的初始解析期间使用document.write，或写入刚刚打开的新窗口（或者更好的是，根本不使用它）。

请使用DOM。示例：

function xyz(){
    var arr = {name: "abc", school: "pqrst"};
    addDiv("name", "Name:" + arr.name);
    addDiv("age", "School:" + arr.school);
}
function addDiv(id, content) {
    var d = document.createElement("div");
    d.id = id;
    d.textContent = content;
    document.body.appendChild(d);
}

<input type="button" value="click!" onclick="xyz()">

如果您有要插入的HTML字符串，则可以使用insertAdjacentHTML进行操作，但是要注意将对象中的文本与HTML合并，因为其中的任何<或&文本必须正确转义（如果您要将内容放入属性中，则更是如此，例如id值）。碰巧您的两个示例值没有这些字符，但是在一般情况下您不能假定这一点。

Answer 2

您可以使用insertAdjacentHTML()代替document.write()。有关更多详细信息，请参见this

function xyz(){
var arr={name:"abc",school:"pqrst"};
document.querySelector('body').insertAdjacentHTML('beforeend','<div id="name">'+"Name:"+ arr.name +'</div>');
document.querySelector('body').insertAdjacentHTML('beforeend','<div id="age">'+"School:"+ arr.school +'</div>');
}

<body>
<form>
<input type="button" value="click!" onclick="xyz()">
</form>

使用document.write

2 个答案: