如何将JQuery实现的自定义HTML插入DOM的代码转换为原生JavaScript（解决appendChild需节点对象问题）

你遇到的问题很典型——jQuery的append()和原生JS的append()行为不一样：jQuery会自动把HTML字符串解析成DOM节点，而原生append()传入字符串时，只会把它当作纯文本插入。下面给你两种靠谱的解决方法：

方法一：用insertAdjacentHTML快速插入（简单直接） #

这是原生JS里专门用来插入HTML字符串的方法，效果和jQuery的append()完全一致，代码改动最小：

let searchHeader = document.querySelector(".block-amu-search-form__title"); 
// 用模板字符串代替拼接，可读性更好
let closeButton = `<div class="callout" data-closable>
 <button class="close-button" aria-label="Close alert" type="button" data-close>
 <span aria-hidden="true">&times;</span>
 </button>
</div>`;
// 'beforeend'表示在元素内部的末尾插入，对应jQuery的append
searchHeader.insertAdjacentHTML('beforeend', closeButton);

方法二：手动构建DOM元素（更安全灵活） #

如果你的HTML结构需要后续操作（比如给按钮加事件），或者想避免HTML字符串可能带来的XSS风险，推荐手动创建每个DOM节点：

let searchHeader = document.querySelector(".block-amu-search-form__title");

// 创建外层容器div
const calloutDiv = document.createElement('div');
calloutDiv.classList.add('callout');
calloutDiv.setAttribute('data-closable', '');

// 创建关闭按钮
const closeBtn = document.createElement('button');
closeBtn.classList.add('close-button');
closeBtn.setAttribute('aria-label', 'Close alert');
closeBtn.setAttribute('type', 'button');
closeBtn.setAttribute('data-close', '');

// 创建按钮内的span
const span = document.createElement('span');
span.setAttribute('aria-hidden', 'true');
span.textContent = '×';

// 组装所有元素
closeBtn.appendChild(span);
calloutDiv.appendChild(closeBtn);
searchHeader.appendChild(calloutDiv);

为什么你的原代码不行？ #

原生Element.append()方法支持传入字符串，但它会把字符串包装成文本节点插入到DOM中，而不是解析成HTML结构。这是它和jQueryappend()的核心区别——jQuery做了自动解析的封装，而原生JS需要你明确告诉它要解析HTML。

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