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

本文翻译自：How to append data to div using JavaScript?

我正在使用AJAX将数据附加到div元素，我从JavaScript填充div，如何将新数据附加到div而不会丢失div中的先前数据？

#1楼

参考：https://stackoom.com/question/Np3P/如何使用JavaScript将数据附加到div

#2楼

Even this will work: 即使这样也会奏效：

var div = document.getElementById('divID');div.innerHTML += 'Text to append';

#3楼

you can use jQuery. 你可以使用jQuery。 which make it very simple. 这使它变得非常简单。

just download the jQuery file add jQuery into your HTML 只需下载jQuery文件，将jQuery添加到HTML中
or you can user online link: 或者您可以在线链接：

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

and try this: 试试这个：

 $("#divID").append(data);

#4楼

If you want to do it fast and don't want to lose references and listeners use: .insertAdjacentHTML() ; 如果你想快速做到并且不想丢失引用，那么使用： .insertAdjacentHTML（） ;

"It does not reparse the element it is being used on and thus it does not corrupt the existing elements inside the element. This, and avoiding the extra step of serialization make it much faster than direct innerHTML manipulation." “它没有重新解析它正在使用的元素 ，因此它不会破坏元素内部的现有元素 。这样，避免了序列化的额外步骤使得它比直接的innerHTML操作快得多 。”

Supported on all mainline browsers (IE6+, FF8+,All Others and Mobile): http://caniuse.com/#feat=insertadjacenthtml 所有主流浏览器（IE6 +，FF8 +，所有其他和移动设备）均支持： http ： //caniuse.com/#feat=insertadjacenthtml

Example from https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML 示例来自https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

#5楼

IE9+ (Vista+) solution, without creating new text nodes: IE9 +（Vista +）解决方案，无需创建新的文本节点：

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

However, this didn't quite do the trick for me since I needed a new line after each message, so my DIV turned into a styled UL with this code: 然而，这对我来说并不是很有效，因为我需要在每条消息之后添加一个新行，所以我的DIV变成了带有以下代码的样式UL：

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

From https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent : 来自https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent ：

Differences from innerHTML 与innerHTML的区别

innerHTML returns the HTML as its name indicates. innerHTML返回HTML，如其名称所示。 Quite often, in order to retrieve or write text within an element, people use innerHTML. 通常，为了在元素中检索或写入文本，人们使用innerHTML。 textContent should be used instead. 应该使用textContent。 Because the text is not parsed as HTML, it's likely to have better performance. 由于文本未被解析为HTML，因此可能会有更好的性能。 Moreover, this avoids an XSS attack vector. 而且，这避免了XSS攻击向量。

#6楼

Why not just use setAttribute ? 为什么不使用setAttribute？

thisDiv.setAttribute('attrName','data you wish to append');

Then you can get this data by : 然后您可以通过以下方式获取此数据

thisDiv.attrName;

如何使用JavaScript将数据附加到div？相关推荐

从零开始使用JavaScript编写数据表格控件（转载）
想起来前段时间面试时遇到的问题,说是如何用javascript实现一个表格控件,说说思路,当时还不知道该怎么办,只是说使用Ext中的表格控件,被追问不使用第三方控件时如何实现就傻眼了,这篇文章介绍的非 ...
flex与JavaScript的数据交互
上一篇发了 flex3 接受外部参数 ,但是后来想想,应该更进一步的了解 flex与JavaScript的数据交互. 第一种: test4.swf 代码: <?xml version=" ...
qt与js html进行数据传递,QT与javascript交互数据的实现
一.数据从QT流向JS 1.QT调用JS的函数,JS通过形参获得QT的值 2.JS调用QT的函数,QT函数的返回值进入JS 二.数据从JS流向QT 1.JS调用QT的函数,QT通过形参获得JS的值 2 ...
javascript的数据检测总结
目录 javaScript的数据检测 1.typeof 2.instanceof 3.constructor 4.Object.prototype.toString.call()--------- 一 ...
7个使用JavaScript构建数据可视化的实用工具库，希望你能喜欢
JavaScript运行网络.您可以在浏览器中使用它,也可以在服务器上使用它,并且可以将其用于移动应用程序. 当今的生态系统充满了强大的库和框架,可帮助工程师为任何平台构建功能强大,以用户为中心的应用 ...
如何使用 JavaScript 显示/隐藏或切换 DIV 元素
在 jQuery 中,您可以使用 .toggle() 方法来切换元素,任何元素.但是,如果您正在寻找纯 JavaScript 解决方案,那么这里就是.我在这里分享一个简单的代码,它展示了使用 Java ...
JavaScript中数据在内存中的存储方式
JavaScript中数据在内存中的存储方式 1.js数据类型分类简单数据类型:Number.String.Boolean.Undefined.Null 复杂数据类型:Object.Array.Fu ...
Layui框架下：JS中根据后台查询到的数据动态往div中ul里面动态添加li
Layui框架下:JS中根据后台查询到的数据动态往div中ul里面动态添加li 先建立好一个div和ul JS代码: $(function () { layui.admin.req({ url: _s ...
html js 点击隐藏div,javascript实现显示和隐藏div方法汇总
javascript实现显示和隐藏div方法汇总 15种方法实现div显示和隐藏 body{ margin: 0; } h1,h2{ margin: 0; } ul{ margin: 0; paddi ...

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

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

如何使用JavaScript将数据附加到div？相关推荐

最新文章

热门文章