如何在 Javascript 中的脚本中注入 html 标签？答案

【问题标题】：How to inject html tags within a script in Javascript?如何在 Javascript 中的脚本中注入 html 标签？
【发布时间】：2021-10-07 09:29:43
【问题描述】：

我有一个字符串，我想根据数组值在其中注入   标记。

我的html代码：

'Hello people. `<span>`Hello to everyone`</span>`'; 
<script>
    let array = ['Hello', 'to everyone'];
</script>

我需要根据数组的内容在 内的'Hello' 和'to everyone' 之间注入  标签。如何在不替换标签且不影响第一个“Hello”单词的情况下做到这一点？

预期输出：

'Hello people. `&lt;span&gt;`Hello `&lt;br&gt;` to everyone`&lt;/span&gt;`'

【问题讨论】：

请发布您的html代码

标签： javascript html tags

【解决方案1】：

您应该通过清除  元素的内容来执行此操作，然后使用 foreach 方法迭代数组，在该方法中添加数组的内容，然后换行 ( )。您可以定义用 const lineBreak = document.createElement('br'); 换行，然后你可以用一些 DOM 这样的操作将它添加到 span 元素 elem.appendChild(lineBreak)

这是完整的代码：

<head>
  <title>hello world</title>

</head>
<body>
  <p>Hello people. <span id='message'  style="WHITE-SPACE: br">Hello to everyone</span></p>
  <script>
    function split_words(){
      let array = ['Hello', 'to everyone'];
      const elem = document.getElementById('message');
      let result = '';
      const lineBreak = document.createElement('br');
      elem.innerHTML = '';
      array.forEach(word => {
        elem.innerHTML += word;
        elem.appendChild(lineBreak)
        
      });
    }
    window.onload = split_words(); 
  </script>
</body>

【讨论】：

【解决方案2】：

您可以在文本中使用\n 或 。你的代码看起来像这样

document.write(`Hello people. <span>Hello <br> to everyone</span>`);

【讨论】：