Question

我编写了一个函数来将文本提交到容器中。文本被添加到每个文本块的底部;我希望它被添加到前一个文本块的顶部而不是底部。

这是我的代码：

function submit() {


var x = document.getElementById("text").value;
var y = document.getElementById("input").value;
var z = document.getDate;
if(x.length == 0 || y.length == 0 ){

    alert('please enter valid information');
    return false;
}


document.getElementById("output").innerHTML += Date() + "</br>" + "   </br>";
document.getElementById("output").innerHTML += y + "</br>" + "</br>";
document.getElementById("output").innerHTML += x + "</br>" + "</br>"; 
document.getElementById("text").value = "";
document.getElementById("input").value = "";

 return true;                     
}

Answer 1

在添加的内容之后重新设置innerhtml，如下所示：

function submit() {


var x = document.getElementById("text").value;
var y = document.getElementById("input").value;
var z = document.getDate;

if(x.length == 0 || y.length == 0 ){

    alert('please enter valid information');
    return false;
}


document.getElementById("output").innerHTML = Date() + "</br></br>" + y +       
    "</br></br>"+ x +"</br></br>" +document.getElementById("output").innerHTML;

document.getElementById("text").value = "";
document.getElementById("input").value = "";



return true;                     
}

假设您没有使用Jquery，其他人只需使用.prepend()

Answer 2

variable += "text"语句是variable = variable + "text"的简写。因此，它将连接您在变量中已有的文本之后提供的文本。在这种情况下，变量是容器的innerHTML属性。因此，文本被连接到容器中已经存在的文本的末尾。

但是您希望在现有文本之前将新文本连接在一起。因此，您必须从容器中读取现有文本，然后将其连接到新文本的末尾，如下所示：variable = "text" + variable。

你可能认为你可以这样做：

document.getElementById("output").innerHTML = Date() + "" + " " + document.getElementById("output").innerHTML; document.getElementById("output").innerHTML = y + "" + "" + document.getElementById("output").innerHTML; document.getElementById("output").innerHTML = x + "" + "" + document.getElementById("output").innerHTML;

但是你会发现那并不能做你想做的事情，因为它会使容器内容的顺序相反。当然，这是因为每个步骤中的innerHTML包括上一步的结果。这留下了两个选项：将所有文本一次性添加，或者将其单独添加到字符串中，然后将其添加到容器的内容中。后者的一个例子：

var new_data = Date() + "" + " "; new_data = new_data + y + "" + ""; new_data = new_data + x + "" + ""; document.getElementById("output").innerHTML = new_data + document.getElementById("output").innerHTML;

当然，由于上面代码段的第二行和第三行将值y + "" + ""和x + "" + ""附加到new_data的末尾，因此代码可以写为

var new_data = Date() + "" + " "; new_data += y + "" + ""; new_data += x + "" + ""; document.getElementById("output").innerHTML = new_data + document.getElementById("output").innerHTML;

请注意使用+=进行追加！

将文字输出到顶部而不是底部

2 个答案: