在JavaScript中创建文本元素时换行失效，是否是追加方式有误？

嘿，我来帮你看看这个换行失效的问题～从你给出的代码片段来看，大概率是你创建了<br>元素，但没有把它正确插入到需要换行的文本节点之间，或者忘记将它添加到DOM结构里。

咱们一步步来修正：

问题分析 #

你已经创建了<br>元素，但从代码片段看，你还没把它追加到对应的父元素（比如reminderDetails这个<p>标签）中，而且需要确保它放在两个需要换行的文本节点中间，才能起到换行效果。

修正后的完整代码示例 #

var reminderDiv = document.getElementById('reminderDiv'); 

// 创建并添加标题
var h2 = document.createElement('h2'); 
var reminderName = document.createTextNode(item.name); 
h2.appendChild(reminderName); 
reminderDiv.appendChild(h2); // 别忘记把标题加入容器

// 创建详情段落
var reminderDetails = document.createElement('p'); 

// 添加"场合"文本
var reminderOccasion = document.createTextNode('Occasion: ' + item.occasion); 
reminderDetails.appendChild(reminderOccasion);

// 插入换行元素（关键！把br加到两个文本之间）
var br = document.createElement('br'); 
reminderDetails.appendChild(br);

// 添加"上次礼物"文本（补全你代码里的do...部分）
var reminderLastGift = document.createTextNode('Last Gift: ' + item.lastGift); 
reminderDetails.appendChild(reminderLastGift);

// 把详情段落加入容器
reminderDiv.appendChild(reminderDetails);

额外提示 #

如果觉得这种逐个创建节点的方式太繁琐，也可以用innerHTML来简化，但要注意如果item里的内容是用户输入的，可能存在XSS风险：

reminderDetails.innerHTML = `Occasion: ${item.occasion}<br>Last Gift: ${item.lastGift}`;

只要确保<br>元素被正确插入到需要分隔的内容之间，并且所有元素都被追加到目标容器中，换行效果就会正常生效啦～

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