如何用JavaScript为SmartSearchBox WebPart的Submit输入框添加内容及FontAwesome图标？

嘿，我来帮你搞定这个问题！针对你在用的SmartSearchBox WebPart，咱们分两部分来处理——先解决FontAwesome搜索图标的追加，再讲如何给submit类型输入框添加HTML和文本内容：

首先得明确：<input type="submit"> 这类元素的value属性只能设置纯文本，没法直接插入HTML（比如FontAwesome的<i>标签），所以咱们有两种可行方案：

方案1：把Submit输入框替换成Button元素（推荐） #

Button元素可以直接包含HTML内容，完美适配FontAwesome图标，还能保留提交功能。步骤如下：

1. 先找到目标submit输入框（记得替换成你实际的选择器，SmartSearchBox的提交按钮通常会有专属类名，比如SharePoint里的ms-SearchBox-submit）：

const submitInput = document.querySelector('input[type="submit"].your-smart-search-submit-class');

2. 创建新的button元素，替换原输入框并添加图标：

if (submitInput) {
  // 创建submit类型的button
  const submitBtn = document.createElement('button');
  submitBtn.type = 'submit';
  // 复制原输入框的样式类，保证UI和原来一致
  submitBtn.className = submitInput.className;
  // 添加FontAwesome图标+文本（比如"搜索"），注意图标类名根据你的FontAwesome版本调整，新版是fa-solid系列
  submitBtn.innerHTML = '<i class="fa fa-search"></i> 搜索';
  // 替换原输入框
  submitInput.parentNode.replaceChild(submitBtn, submitInput);
}

提醒：确保你的页面已经加载了FontAwesome库（不管是CDN引入还是本地文件），不然图标会显示成空白占位符哦。

方案2：在Submit输入框旁添加独立图标元素 #

如果不想替换原输入框，可以在它旁边插入图标，再用CSS调整样式让两者看起来像一个整体：

const submitInput = document.querySelector('input[type="submit"].your-smart-search-submit-class');
if (submitInput) {
  // 创建FontAwesome图标元素
  const searchIcon = document.createElement('i');
  searchIcon.className = 'fa fa-search smart-search-icon';
  // 把图标插入到输入框前面（也可以用insertBefore改成后面）
  submitInput.parentNode.insertBefore(searchIcon, submitInput);
}

然后加一段CSS调整位置，让图标贴在按钮上：

.smart-search-icon {
  position: relative;
  left: -25px;
  pointer-events: none; /* 点击图标时触发按钮的提交事件 */
  color: #666;
}

还是要强调：<input type="submit"> 本身不支持HTML内容，只能通过value属性设置纯文本：

// 给submit输入框设置纯文本
const submitInput = document.querySelector('input[type="submit"].your-smart-search-submit-class');
if (submitInput) {
  submitInput.value = '点击搜索';
}

如果要添加HTML内容，必须换成<button type="submit">元素，然后用innerHTML或append()方法操作：

// 给button元素设置HTML+文本内容
const submitBtn = document.querySelector('button[type="submit"].your-smart-search-button-class');
if (submitBtn) {
  // 直接覆盖原有内容，设置新的HTML+文本
  submitBtn.innerHTML = '<span class="custom-text">开始搜索</span> <i class="fa fa-search"></i>';
  
  // 或者在原有内容后面追加图标
  const searchIcon = document.createElement('i');
  searchIcon.className = 'fa fa-search';
  submitBtn.appendChild(searchIcon);
}

内容的提问来源于stack exchange，提问作者farah el agha