这个简短的教程是在普通的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");