如何使用JavaScript将数据附加到div?

JavaScript

Mandy

2020-04-03

我正在使用AJAX将数据附加到div元素,从JavaScript填充div,如何在不丢失div中找到的先前数据的情况下将新数据附加到div?

第3968篇《如何使用JavaScript将数据附加到div?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
十三 2020.04.03

您可以使用jQuery。这使其非常简单。

只需下载jQuery文件,即可将jQuery添加到您的HTML中
,也可以在线用户链接:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

并尝试这个:

 $("#divID").append(data);
伽罗达蒙小胖 2020.04.03

IE9 +(Vista +)解决方案,无需创建新的文本节点:

var div = document.getElementById("divID");
div.textContent += data + " ";

但是,这对我来说并没有什么用处,因为在每条消息后都需要换一行,因此我的DIV变成了带有以下代码的样式化UL:

var li = document.createElement("li");
var text = document.createTextNode(data);
li.appendChild(text);
ul.appendChild(li);

https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

与innerHTML的区别

innerHTML返回其名称所指示的HTML。通常,为了检索或写入元素内的文本,人们使用innerHTML。应该使用textContent代替。因为文本没有被解析为HTML,所以它可能具有更好的性能。此外,这避免了XSS攻击媒介。

泡芙 2020.04.03

Java脚本

document.getElementById("divID").html("this text will be added to div");

jQuery的

$("#divID").html("this text will be added to div");

使用时.html()不带任何参数即可查看是否已输入。您可以使用浏览器控制台快速测试这些功能,然后再在代码中使用它们。

Mandy村村 2020.04.03

使用appendChild:

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
var content = document.createTextNode("<YOUR_CONTENT>");
theDiv.appendChild(content);

使用innerHTML:
这种方法将删除@BiAiB提到的现有元素的所有侦听器。因此,如果您打算使用此版本,请谨慎使用。

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
theDiv.innerHTML += "<YOUR_CONTENT>"; 

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android