Question

这是我目前的代码

<input type='text' id='txtArea'>
<input type="button" value="Add" id="addButton" onclick='addItems()'>
<input type="button" value="Display" id="displayButton" onclick='displayItems()'><hr>
<p id='elements'></p>

{{1}}

在文本字段中，我添加了推送到数组的数字。当我按下显示时，它应该在水平线后面显示该数组的所有元素，而是打开一个包含所有这些元素的新页面。

我想要的是在同一页面的水平线后面显示元素。有人可以帮助我吗？

Answer 1

document.write()将清除正文中的所有数据，因此您无法在加载后使用它。

尝试制作文字var，

var text = "";

然后追加循环

text += tag1 + 'Element ' + i + ' = ' + items[i] + tag2

最后做

document.body.innerHTML = text;

Answer 2

您需要设置段落elements

的文字

document.getElementById('elements').innerHTML = 'New Value';

而不是

document.write(....)

＆＃13;

var items = [];
function addItems() {
  items.push(document.getElementById("txtArea").value);
  document.getElementById('txtArea').value = '';
  console.log('items = [' + items + ']');
}

function displayItems() {
  var tag1 = '<p>',
    tag2 = '</p>',
    str = '';

  for (var i in items) {
    str += tag1 + 'Element ' + i + ' = ' + items[i] + tag2 + '<br/>';
  }
  document.getElementById('elements').innerHTML = str;
}

＆＃13;

<input type='text' id='txtArea'>
<input type="button" value="Add" id="addButton" onclick='addItems()'>
<input type="button" value="Display" id="displayButton" onclick='displayItems()'>
<hr>
<p id='elements'></p>

＆＃13;

Answer 3

如果我理解你的问题，我相信你可以做这样的事情，遗憾的是我没时间亲自尝试。

var bodytag = document.getElementsByTagName('body');
for(var i in items) {
    var e = document.createElement('p');
    e.innerHTML = 'Element ' + i + ' = ' + items[i]
    bodytag.appendChild(e);
}

祝你好运。

Answer 4

我设法使用w3schools的这个例子让它工作：w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_body_app‌end。

我已从html代码中删除了<p id='elements'></p>标记，并修改了displayItems函数，如下所示：

function displayItems () {
    for(var i in items) {
    var e = document.createElement("p");
    var t = document.createTextNode('Element ' + i + ' = ' + items[i]);
    e.appendChild(t);
    document.body.appendChild(e);
    }

谢谢大家的帮助。

Answer 5

使用

document.getElementsByTagName("BODY")[0].html = sth;

而不是：

document.write..

JS / HTML - 如何使用JS将多行文本写入文档正文？

5 个答案: