JS中通过字符串追加元素的方法与注意事项

JS通过字符串追加元素

在原生JavaScript开发中，通常采用动态创建DOM元素的方式。具体步骤包括使用createElement生成节点，通过innerHTML为元素赋值内容，最后利用appendChild将其追加至父元素。

具体实现代码如下：

// 动态添加对象
// 1. 创建元素
var li = document.createElement('li');
// 2. 添加节点
li.innerHTML = text.value;
 
// 3.1 将一个节点添加到指定父节点的子节点列表末尾
ul.appendChild(li);
 
// 3.2 将一个节点添加到父节点的指定子节点前面
ul.insertBefore(li, ul.children[0]);

进阶做法是利用insertAdjacentHTML()方法，该方法允许直接将字符串格式的HTML元素插入到父元素中。

// 这里的ul是父节点
var li = '<li class="liactive"><span>测试</span></li>';
ul.insertAdjacentHTML('beforeend', li);
 
// 第一个参数是插入的位置，该参数有以下四个值：
// beforebegin：插入到元素自身的前面
// afterbegin：插入元素内部的第一个子节点之前
// beforeend：插入元素内部的最后一个子节点之后
// afterend：插入到元素自身的后面

appendChild与insertAdjacentHTML的主要区别在于：前者无法直接追加包含子元素的字符串，而后者支持这一功能。

JS追加字符串的奇怪问题

在尝试向表格追加一行信息时，发现tr和td元素全部被过滤掉了。

打印出来的原始字符串如下图：

追加以后的结构如下图：

出现这个问题的主要原因就在于那个隐藏域上，也就是tr之后多了其它的元素就会出现这个问题，但至于为什么会这样，可能是自己技术没到家哈，理解的不够，不知道怎么回事

解决很简单

把隐藏域放到td里面去就没有问题了，原理就不知道了，记一下，仅防以后再犯此类错误

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。