代码之家 › 专栏 › 技术社区 › 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 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

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

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前