iOS/iPadOS中更新innerHTML时<br>标签被忽略问题求助

问题说明 #

升级至iPadOS 17.2后，Safari在通过innerHTML更新元素内容时会忽略<br>标签，导致预期的换行效果失效。目前暂不确定该问题是否仅影响iframe环境。已向苹果反馈该问题，苹果回复称这是Safari为遵循CSS规范草案引入的永久新行为，并非Bug。

可行解决方案 #

针对该行为，以下几种简便方案可解决换行需求：

• 方案1：使用textContent配合样式
  给目标元素添加white-space: pre-line样式，然后通过textContent插入带换行符（\n）的文本，浏览器会自动将换行符解析为换行：

  .target-element { white-space: pre-line; }
  

  document.querySelector('.target-element').textContent = '第一行\n第二行';
  

• 方案2：替换<br>为块级元素
  将原本的<br>标签替换为<p>或<div>等块级元素，通过元素的默认块级布局实现换行：

  // 示例：将内容中的<br>替换为<div></div>
  const content = '第一行<div></div>第二行';
  document.querySelector('.target-element').innerHTML = content;
  

• 方案3：改用insertAdjacentHTML
  使用insertAdjacentHTML替代innerHTML更新内容，该方法可正常保留<br>标签的换行作用：

  document.querySelector('.target-element').insertAdjacentHTML('beforeend', '第一行<br>第二行');
  

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