如何使用javascript将数据追加到div中?

604 阅读1分钟

这个简短的教程是在普通的javascript和jquery中向div追加内容。

让我们在HTML中定义一个div元素

<div id="employee">
</div>

在这里,我们要追加的是数据,而不是HTML标签的数据。

使用普通的javascript

原生的javascript提供了DOM元素。

首先,创建元素,使用getElementById 方法获得带有id选择器的元素。接下来,使用createTextNode创建一个带有数据的对象。使用appendChild 方法将一个对象附加到div元素上。

var employeeDiv = document.getElementById("employee");
var content = document.createTextNode("testcontent");
employeeDiv.appendChild(content);

同样地,你可以使用innerHTML属性,它可以添加HTML和文本数据。这为XSS攻击增加了一个安全漏洞。此外,它重新创建了div,所有对现有div元素的引用和监听器都不能按预期工作。

var employeeDiv = document.getElementById("employee");
employeeDiv.innerHTML += 'test content';

还有,另一种方法,使用textContent 方法。

var employeeDiv = document.getElementById("employee"); employeeDiv.textContent += test content ;

Both generates the following html output
```html
<div id="employee">
test content</div>

使用jquery

如果你在你的应用程序中使用jquery,它可以以多种方式进行。

使用id选择器语法来选择一个div并使用append() 方法。

$('#employee').append('test content')

另一种方法,使用html() 方法

$("#employee").html("test content");