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

2020/09/28 16:21 · javascript ·  · 0评论

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

试试这个:

var div = document.getElementById('divID');

div.innerHTML += 'Extra stuff';

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

当心innerHTML使用时您会丢失一些东西:

theDiv.innerHTML += 'content';

等效于:

theDiv.innerHTML = theDiv.innerHTML + 'content';

这将破坏您内部的所有节点div并重新创建新节点对它内部元素的所有引用和侦听器都将丢失

如果需要保留它们(例如,在附加了单击处理程序时),则必须在新内容后附加DOM函数(appendChild,insertAfter,insertBefore):

var newNode = document.createElement('div');
newNode.innerHTML = data;
theDiv.appendChild(newNode);

如果您想快速执行此操作并且不想丢失引用和侦听器,请使用:.insertAdjacentHTML() ;

“它不会重新解析正在使用的元素,因此不会破坏元素内部的现有元素。而且,避免了额外的序列化步骤,使其比直接使用innerHTML操作快得多。”

在所有主流浏览器(IE6 +,FF8 +,所有其他和移动版)上受支持:http : //caniuse.com/#feat=insertadjacenthtml

来自https://developer.mozilla.org/zh-CN/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>

如果您使用的是jQuery,则可以使用$('#mydiv').append('html content'),它将保留现有内容。

http://api.jquery.com/append/

即使这将工作:

var div = document.getElementById('divID');

div.innerHTML += 'Text to append';

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/zh-CN/docs/Web/API/Node/textContent

与innerHTML的区别

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

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

只需下载jQuery文件,即可将jQuery添加到您的HTML中,

或者您可以使用在线链接:

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

并尝试这个:

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

以下方法没有其他方法通用,但是当您确定div的最后一个子节点已经是文本节点时,它非常有用。这样,您将不会使用MDN参考AppendData创建新的文本节点。appendData

let mydiv = document.getElementById("divId");
let lastChild = mydiv.lastChild;

if(lastChild && lastChild.nodeType === Node.TEXT_NODE ) //test if there is at least a node and the last is a text node
   lastChild.appendData("YOUR TEXT CONTENT");

为什么不只使用setAttribute呢?

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

然后,您可以通过以下方式获取此数据:

thisDiv.attrName;

Java脚本

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

jQuery的

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

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

本文地址:http://javascript.askforanswer.com/ruheshiyongjavascriptjiangshujufujiadaodiv.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!