动态添加div及内容时遇appendTo报错问题求助

你遇到的obj.appendTo is not a function错误很常见——因为你定义的obj只是个普通的HTML字符串，而appendTo()是jQuery对象专属的方法，直接给字符串调用这个方法肯定会报错。下面给你两种靠谱的实现方式，按需选用：

方法一：用jQuery正确实现 #

只需要把你的HTML字符串用$()包装成jQuery对象，就能正常调用appendTo()了：

var a = 'lorem';
var obj = "<div class='tagsingle' title='delete'>" + a + "</div>";
$(obj).appendTo('#tagstore'); // 核心：用$()把字符串转为jQuery对象

方法二：原生JavaScript实现（无需jQuery） #

如果你不想依赖jQuery，补全你没写完的原生代码即可，步骤很清晰：

var a = 'lorem';
// 1. 创建新的div元素
var obj = document.createElement('div');
// 2. 添加类名
obj.classList.add('tagsingle'); // 或者用 obj.className = 'tagsingle'
// 3. 设置title属性
obj.setAttribute('title', 'delete');
// 4. 设置元素内容
obj.textContent = a;
// 5. 找到父容器并添加新元素
document.getElementById('tagstore').appendChild(obj);

另外还有一种更简洁的原生写法，直接插入HTML字符串：

var a = 'lorem';
var obj = "<div class='tagsingle' title='delete'>" + a + "</div>";
// 把字符串插入到父容器的末尾
document.getElementById('tagstore').insertAdjacentHTML('beforeend', obj);

这几种方法都能帮你完成动态添加元素的需求~

内容的提问来源于stack exchange，提问作者user7461846