在textHTML中添加文本和图像之间的br标记

Question

在我的javascript程序中，我使用innerHTML在div中创建了div并添加了图像和一些硬编码文本。但我试图在文本和图像之间添加动态br标记。应显示第一个文本然后想要换行，然后应显示图像。所以创建了br并添加但不知何故它不起作用。任何人都可以纠正我吗？

代码：

＆＃13;

＆＃13;

function useInnerHTML() {

  var movieText2 = prompt("One of my favourite movies");

  var textNode = document.createTextNode(movieText2);
  ele.appendChild(textNode);
  document.body.appendChild(ele);

  var newDiv2 = document.createElement("div");
  var br = document.createElement("br");
  newDiv2.className = "green";

  var pic = "A picture is worth a thousand words";
  var text2 = '<img src=\'https://i.stack.imgur.com/meXYL.png\'>';

  newDiv2.innerHTML = pic + text2;

  document.body.appendChild(newDiv2);
  document.body.appendChild(br);

}

useInnerHTML();

＆＃13;

.pink {
  background-color: pink;
}

.green {
  background-color: #71e887;
}

＆＃13;

＆＃13;

＆＃13;

我的输出：

！[输出] [1]

Answer 1

只需使用

pic = "A picture is worth a thousand words <br>";

由于使用.innerHTML，<br>标记不会被转义，并且实际上会作为分隔线元素嵌入到HTML中。

或者

使用模板字符串和insertAdjacentHTML

function addNewMovie() {

  var movieName = prompt("One of my favourite movies").trim(); // Trim it!
  if(!movieName) return;                                       // do nothing if empty!

  var movieTemplate = `
    <div class="movie">
      <h1>${movieName}</h1>
      <div class="green">
        A picture is worth a thousand words<br>
        <img src='//placehold.it/100x100/0bf'>
      </div>
    </div>
  `;

  document.body.insertAdjacentHTML("beforeend", movieTemplate);
}

<button onclick="addNewMovie()">ADD NEW MOVIE</button>

......更干净，更好。

Answer 2

您正在图片后添加<br>，请尝试这样做：

newDiv2.innerHTML = pic + br + text2;

document.body.appendChild(newDiv2);