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

Mandy · 04月03日

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

回答(4)
时间
十三
4 · 2020-04-03 11:36:15

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

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

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

并尝试这个:

 $("#divID").append(data);
伽罗达蒙小胖
3 · 2020-04-03 11:36:15

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攻击媒介。

泡芙
2 · 2020-04-03 11:36:15

Java脚本

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

jQuery的

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

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

D
Davaid
1 · 2020-04-03 11:36:15

使用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>"; 

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序