Question

请耐心等待这个问题;我刚刚开始使用Javascript进行编码，因此我想在进入jQuery之前有一个强大的基础。

我有以下Javascript代码：

var app = {
  text: document.getElementById('text'),
  output: document.getElementById('output'),
  createDiv: document.createElement('div')
};

function postData(){
  app.output[0].appendChild(app.createDiv.firstChild);
  app.createDiv.classname = 'text';
  document.getElementsByClassName('username').innerHTML += app.text.value;
}

onClick我希望app.text的值打印（使用innerHTML）输出div。有什么想法或问题吗？对不起，如果我模糊或没有意义，我现在已经盯着它看了4个小时，我可能只是被烧掉了！

Answer 1

我不确定你在问什么，但我发现你的代码存在以下问题：

app.output[0]：应该没有[0]，app.output已经是一个元素（你是通过id获得的）。所以使用app.output.appendChild(app.createDiv.firstChild);。不过，这没有任何意义; as Barmar said，你刚刚创建了那个div，所以那时它没有任何孩子。
app.createDiv.classname：应为className
document.getElementsByClassName('username').innerHTML：这会返回多个元素，也许您想要document.getElementsByClassName('username')[0].innerHTML？

Answer 2

您必须创建一个文本节点并将其插入document.getElementsByClassName返回的NodeList中的每个元素之前：

var node = document.createTextNode(app.text.value);
var elements = document.getElementsByClassName('username');

for (var i = 0; i < elements.length; i++) {
    var elem = elements[i];
    elem.parentNode.insertBefore(node.cloneNode(), elem)
}

只是为了诱惑你使用jQuery版本：

$('.username').before(app.text.value);

将一些innerHTML添加到Native Javascript中的div

2 个答案: