代码之家 › 专栏 › 技术社区 › Cris

当JS添加内容时,如何在<div>中显示粗体文本?

css html javascript

Cris · 技术社区 · 1 年前

第二个元素没有显示预期的结果。为什么以及如何修复?

function process(sentence,element) {
    
    const words = sentence.split(' ');
    const container = document.getElementById(element);
    let index = 0;

    container.innerHTML = '';

    for (let i = 0; i < words.length; i++) {
        //console.log(words[i]);
        container.innerHTML += words[i] + ' '; // Display the word
    }
}

process("the quick <b>fox</b> jumps",'e1');   //displayed the word 'fox' as expected in bold
process("the quick <b> fox </b> jumps",'e2'); //displayed the word 'fox' as plain text, not as expected

div{
  border:1px solid #999;
  margin: 0 0 10px 0;
  display:block;
  font-size:22px
  }

<div id="e1"></div>
<div id="e2"></div>

2 回复 | 直到 1 年前

trincot 1 年前

在第二种情况下,文本“fox”没有以粗体显示,原因如下:

您在某个时刻添加了  到 innerHTML 财产,但不是关闭  。这将是无效的HTML,因此标记将立即关闭。只有在循环的下一次迭代中,才会添加单词“fox”,但现在它来了之后这个  标签。在之后的迭代中,  已添加到 innerHTML ,但它没有效果,因为没有匹配  .

总之,如果你分配给 innerHTML 请注意,HTML已经过验证,将应用更正使其有效。

Barmar 1 年前

问题是你分配给 innerHTML 逐渐地,一次一个单词。这不起作用,因为它会修复 innerHTML 每次分配后,将数据导入DOM。如果HTML无效,它将修复它;如果你有一个没有结束标签的开始标签,它将自动关闭。

在第二次通话中,当单词只是  ,任务完成后,它变成  ;并附加  其本身根本没有任何效果。所以

process("the quick <b> fox </b> jumps",'e2');

实际上相当于

process("the quick <b></b> fox  jumps",'e2');

如您所见, fox 不再是  和  ,所以没有用粗体显示。

似乎没有任何充分的理由让循环分配给 innerHTML 一次一个字。只管去做

container.innerHTML = sentence;

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前